使用js实现对table的动态添加、删除和更新
来源：互联网 发布：淘宝返利机器人原理 编辑：程序博客网 时间：2024/05/28 06:04
<!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>
