js实现对table动态添加、删除和更新的方法
本文实例讲述了js实现对table动态添加、删除和更新的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>表格操作</title>
<styletype="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1pxsolid#333;
border-bottom:1pxsolid#333;
width:300px;
}
td{
border-right:1pxsolid#333;
border-bottom:1pxsolid#333;
}
.title{
text-align:center;
font-weight:bold;
background:#ccc;
}
.center{
text-align:center;
}
#displayInfo{
color:red;
}
</style>
<scripttype="text/javascript">
functionaddRow(){//增加一行
vartableObj=document.getElementById('myTable');
varrowNums=tableObj.rows.length;
varnewRow=tableObj.insertRow(rowNums);
varcol1=newRow.insertCell(0);
col1.innerHTML="幸福从天而降";
varcol2=newRow.insertCell(1);
col2.innerHTML="$18.5";
col2.align="center";
vardivInfo=document.getElementById('displayInfo');
divInfo.innerHTML="添加商品成功";
}
functiondelRow(){ //删除第二行
document.getElementById('myTable').deleteRow(1);
vardivInfo=document.getElementById('displayInfo');
divInfo.innerHTML="删除商品成功";
}
functionupdateRow(){ //更新行的信息
varuRow=document.getElementById('myTable').rows[0];
uRow.className="title";
}
</script>
</head>
<body>
<tableborder="0"cellpadding="0"cellspacing="0"id="mytable">
<trid="row1">
<td>书名</td>
<td>价格</td>
</tr>
<trid="row2">
<td>看得见风景的房间</td>
<tdclass="center">$30.00</td>
</tr>
<trid="row3">
<td>60个瞬间</td>
<tdclass="center">$32.00</td>
</tr>
</table>
<inputname="b1"type="button"value="增加一行"onclick="javascript:addRow();"/><br/>
<inputname="b2"type="button"value="删除第二行"onclick="javascript:delRow();"/><br/>
<inputname="b3"type="button"value="修改标题"onclick="javascript:updateRow();"/><br/>
<divid="displayInfo"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。