功能说明:用JS table实现增删改查
创建时间:2012-7-10
创建人:紫樱桑
备注:;欢迎转载,以及提出宝贵的意见,本人才疏学浅,愿共同探讨
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>用JS table实现增删改查</title> <style type="text/css"> #divBody { width:900px; margin:50px auto ; } #getTable { border-left:1px solid black; border-top:1px solid black; text-align:center; margin:10px auto; width: 618px; height: 139px; } #getTable td { border-right:1px solid black; border-bottom:1px solid black; width:140px; height:30px; } input[type="text"] { width:120px; height:19px; } </style> <script type="text/javascript"> function addRow() { //增加一行 //得到当前行 var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;//当前行的行号 // var c = document.getElementById("getTable").rows.length;//得到插入前行的总数 var row = document.getElementById("getTable").insertRow(currRowIndex);//插入当前行 // var rowCount = document.getElementById("getTable").rows.length; //插入一行之后的行总数 //var countCell = document.getElementById("getTable").rows.item(0).cells.length;//每一行有多少个单元格 var currRow = event.srcElement.parentNode.parentNode;//当前行 //var tb = document.getElementById("getTable");//table对象 //以下方式 用来读取当前行 控件的值 var mess0 = currRow.cells(0).children[0].value; var mess1 = currRow.cells(1).children[0].value; var mess2 = currRow.cells(2).children[0].value; var mess3 = currRow.cells(3).innerText; if (mess0=="") { alert("姓名不能为空"); return; } if (mess1 == "") { alert("年龄不能够为空"); return; } if (mess2 == "") { alert("地址不能为空"); return; } if (mess3 == "保存") { //保存的本质是增加以后再删除 //alert("删除了这一行!"); document.all("getTable").deleteRow(currRowIndex + 1); } //以下方式 ,用来读取纯文本 // var mess0 = currRow.cells(0).innerText; // var mess1 = currRow.cells(1).innerText; // var mess2 = currRow.cells(2).innerText; row.insertCell(0).innerHTML = mess0; row.insertCell(1).innerHTML = mess1; row.insertCell(2).innerHTML = mess2; row.insertCell(3).innerHTML = "<a href='#' onclick='deleteRow()'>删除</a> <a href='#' onclick='editRow()'>编辑</a>"; } function editRow() { var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex; //当前行的行号 var currRow = event.srcElement.parentNode.parentNode; //当前行 var mess0 = currRow.cells(0).innerText; var mess1 = currRow.cells(1).innerText; var mess2 = currRow.cells(2).innerText; //修改,替换的本质是 删除然后在增加 document.all("getTable").deleteRow(currRowIndex); var row = document.getElementById("getTable").insertRow(currRowIndex); //插入当前行 row.insertCell(0).innerHTML = "<input type='text' value='"+ mess0+"' />"; row.insertCell(1).innerHTML = "<input type='text' value='"+ mess1+"' />"; row.insertCell(2).innerHTML = "<input type='text' value='"+ mess2+"' />"; row.insertCell(3).innerHTML = "<a href='#' onclick='addRow()'>保存</a>"; } //删除 function deleteRow() { var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex; document.all("getTable").deleteRow(currRowIndex); } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="divBody"> <table id="getTable" cellpadding="0" cellspacing="0"> <tr><td class="td">姓名</td><td>年龄</td><td>地址</td><td>操作</td></tr> <tr><td>王重阳</td><td>60</td><td>古墓</td><td class="td"><a href="#" onclick="deleteRow()">删除</a> <a href="#" onclick="editRow()">编辑</a></td></tr> <tr><td>张三丰</td><td>20</td><td>武当山</td><td class="td"><a href="#" onclick="deleteRow()">删除</a> <a href="#" onclick="editRow()">编辑</a></td></tr> <tr><td><input type="text"/></td><td><input type="text" /></td><td class="td"> <input type="text"/></td><td> <a href="#" onclick="addRow()">新增</a></td></tr> <%-- <tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="td"> <a href="#" onclick="deleteRow()">删除</a></td></tr>--%> </table> <div id="tableget"></div> </div> </div> </form> </body> </html>