本文实例讲述了js实现对table动态添加、删除和更新的方法。分享给大家供大家参考。具体实现方法如下:
<!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=utf-8" /> <title>表格操作</title> <style type="text/css"> body { font-size: 13px; line-height: 25px; } table { border-top: 1px solid #333; border-bottom: 1px solid #333; width: 300px; } td { border-right: 1px solid #333; border-bottom: 1px solid #333; } .title { text-align: center; font-weight: bold; background: #ccc; } .center { text-align: center; } #displayInfo { color: red; } </style> <script type="text/javascript"> function addRow() { //增加一行 var tableObj = document.getElementById('myTable'); var rowNums = tableObj.rows.length; var newRow = tableObj.insertRow(rowNums); var col1 = newRow.insertCell(0); col1.innerHTML = "幸福从天而降"; var col2 = newRow.insertCell(1); col2.innerHTML = "$18.5"; col2.align = "center"; var divInfo = document.getElementById('displayInfo'); divInfo.innerHTML = "添加商品成功"; } function delRow() { //删除第二行 document.getElementById('myTable').deleteRow(1); var divInfo = document.getElementById('displayInfo'); divInfo.innerHTML = "删除商品成功"; } function updateRow() { //更新行的信息 var uRow = document.getElementById('myTable').rows[0]; uRow.className = "title"; } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" id="mytable"> <tr id="row1"> <td>书名</td> <td>价格</td> </tr> <tr id="row2"> <td>看得见风景的房间</td> <td class="center">$30.00</td> </tr> <tr id="row3"> <td>60个瞬间</td> <td class="center">$32.00</td> </tr> </table> <input name="b1" type="button" value="增加一行" onclick="javascript:addRow();"/><br /> <input name="b2" type="button" value="删除第二行" onclick="javascript:delRow();"/><br /> <input name="b3" type="button" value="修改标题" onclick="javascript:updateRow();"/><br /> <div id="displayInfo"></div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。