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程序设计有所帮助。