表格操作

时间：2015-11-01 00:16:16 阅读：179 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body{
    font-size:13px;
    line-height:25px;
    }
table{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    width:300px;
}
td{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    }
.center{
    text-align:center;
}
      
</style>
<script type="text/javascript">
function addRow(){    
var fRow=document.getElementById("row3");
var newRow=document.createElement("tr")    ;
 //创建行节点
var col1=document.createElement("td");  
 //创建单元格节点
col1.innerHTML="幸福从天而降";       
    //为单元格添加文本
var col2=document.createElement("td");
col2.innerHTML="&yen;18.50";
col2.setAttribute("align","center");
newRow.appendChild(col1);            
  //把单元格添加到行节点中
newRow.appendChild(col2);
document.getElementById("row3").parentNode.insertBefore(newRow,fRow);  
//把行节点添加到表格末尾
    }
function updateRow(){
    var uRow=document.getElementById("row1");
    //标题行设置为字体加粗、文本居中显示，背景颜色为灰色
   uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");
    }

function delRow(){
    var dRow=document.getElementById("row2"); 
    //访问被删除的行
     dRow.parentNode.removeChild(dRow);      
        //删除行
    }

function copyRow(){
    var oldRow=document.getElementById("row3");
     //访问复制的行
    var newRow=oldRow.cloneNode(true);          
     //复制指定的行及子节点
    document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
    }
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>从你的全世界经过</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>追风筝的人</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行"  onclick="delRow()"/>
<input name="b3" type="button" value="修改标题样式"  onclick="updateRow()"/>
<input name="b4" type="button" value="复制最后一行"  onclick="copyRow()" />
</body>
</html>

表格操作

标签：

原文地址：http://www.cnblogs.com/caidupingblogs/p/4926432.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行