本文实例讲述了js实现对table动态添加、删除和更新的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: 表格操作 <br /> body { <br /> font-size: 13px; <br /> line-height: 25px; <br /> } <br /> table { <br /> border-top: 1px solid #333; <br /> border-bottom: 1px solid #333; <br /> width: 300px; <br /> } <br /> td { <br /> border-right: 1px solid #333; <br /> border-bottom: 1px solid #333; <br /> } <br /> .title { <br /> text-align: center; <br /> font-weight: bold; <br /> background: #ccc; <br /> } <br /> .center { <br /> text-align: center; <br /> } <br /> #displayInfo { <br /> color: red; <br /> } <br /> <br /> function addRow() { //增加一行 <br /> var tableObj = document.getElementById('myTable'); <br /> var rowNums = tableObj.rows.length; <br /> var newRow = tableObj.insertRow(rowNums); <br /> var col1 = newRow.insertCell(0); <br /> col1.innerHTML = "幸福从天而降"; <br /> var col2 = newRow.insertCell(1); <br /> col2.innerHTML = "$18.5"; <br /> col2.align = "center"; <br /> var divInfo = document.getElementById('displayInfo'); <br /> divInfo.innerHTML = "添加商品成功"; <br /> } <br /> function delRow() { //删除第二行 <br /> document.getElementById('myTable').deleteRow(1); <br /> var divInfo = document.getElementById('displayInfo'); <br /> divInfo.innerHTML = "删除商品成功"; <br /> } <br /> function updateRow() { //更新行的信息 <br /> var uRow = document.getElementById('myTable').rows[0]; <br /> uRow.className = "title"; <br /> } <br /> 书名 价格 看得见风景的房间 $30.00 60个瞬间 $32.00 希望本文所述对大家的javascript程序设计有所帮助。
