js做带编辑，保存，删除，添加功能的表格

 <!--产品属性处理部分开始-->
               <table id="productAttributeBlock" class="tabEditList" style="width:100%;">
                    <thead>
                        <tr>
                            <th>
                                属性类型
                            </th>
                            <th>
                                属性名称
                            </th>
                            <th>
                                属性编码
                            </th>
                            <th>
                                是否附加属性
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                    </thead>
               </table>
               <script type="text/javascript">

                   var Init = function () {
                       var oTBody = document.createElement('TBODY');
                       document.getElementById('productAttributeBlock').appendChild(oTBody);
                   };

                   var AddRow = function () {
                       var rowIndex = document.getElementById('productAttributeBlock').tBodies[0].rows.length;
                       var oRow = document.createElement('TR');
                       oRow.setAttribute("id", "row" + rowIndex);
                       var oUnit = document.createElement('TD');
                       oUnit.innerHTML = '<input type="text" id="type' + rowIndex + '" name="attributeType"/>';
                       oRow.appendChild(oUnit);
                       oUnit = document.createElement('TD');
                       oUnit.innerHTML = '<input type="text" id="name' + rowIndex + '" name="attributeName"/>';
                       oRow.appendChild(oUnit);
                       oUnit = document.createElement('TD');
                       oUnit.innerHTML = '<input type="text" id="code' + rowIndex + '" name="attributeCode"/>';
                       oRow.appendChild(oUnit);
                       oUnit = document.createElement('TD');
                       oUnit.innerHTML = '<input type="text" id="additional' + rowIndex + '" name="isAdditional"/>';
                       oRow.appendChild(oUnit);
                       oUnit = document.createElement('TD');
                       oUnit.innerHTML = '<input type="button" value="添加" id="add' + rowIndex + '" οnclick="addFunc()"/>';
                       oRow.appendChild(oUnit);
                       return oRow;
                   };

                   var addFunc = function () {
                       //alert(document.getElementById("type0").value);
                       //alert(document.getElementById("type0").getAttribute("value"));他们不相同
                       var type = document.getElementById("type0").value;
                       var name = document.getElementById("name0").value;
                       var code = document.getElementById("code0").value;
                       var additional = document.getElementById("additional0").value;

                       document.getElementById("type0").value = "";
                       document.getElementById("name0").value = "";
                       document.getElementById("code0").value = "";
                       document.getElementById("additional0").value = "";

                       var newRow = document.createElement('TR');
                       var newUnit = document.createElement('TD');
                       newUnit.innerHTML = type;
                       newRow.appendChild(newUnit);
                       newUnit = document.createElement('TD');
                       newUnit.innerHTML = name;
                       newRow.appendChild(newUnit);
                       newUnit = document.createElement('TD');
                       newUnit.innerHTML = code;
                       newRow.appendChild(newUnit);
                       newUnit = document.createElement('TD');
                       newUnit.innerHTML = additional;
                       newRow.appendChild(newUnit);
                       newUnit = document.createElement('TD');
                       newUnit.innerHTML = '<input type="button" value="修改" οnclick="EditFunc(this)"/><input type="button" value="删除" οnclick="DelFuc(this)"/>';
                       newRow.appendChild(newUnit);
                       //newRow.setAttribute("id", "row" + document.getElementById('productAttributeBlock').tBodies[0].rows.length);
                       document.getElementById('productAttributeBlock').tBodies[0].appendChild(newRow);
                   };

                   var DelFuc = function (element) {
                       var row = element.parentNode.parentNode;
                       document.getElementById('productAttributeBlock').tBodies[0].deleteRow(row.rowIndex-1);
                   };

                   var EditFunc = function (element) {
                       var row = element.parentNode.parentNode;
                       var type = row.cells[0].innerHTML;
                       var name = row.cells[1].innerHTML;
                       var code = row.cells[2].innerHTML;
                       var additional = row.cells[3].innerHTML;

                       row.cells[0].innerHTML = '<input type="text" value="' + type + '" id="edittype"/>';
                       row.cells[1].innerHTML = '<input type="text" value="' + name + '" id="editname"/>';
                       row.cells[2].innerHTML = '<input type="text" value="' + code + '" id="editcode"/>';
                       row.cells[3].innerHTML = '<input type="text" value="' + additional + '" id="editadditional"/>';
                       row.cells[4].innerHTML = '<input type="button" value="保存" οnclick="SaveFunc(this)"/>';
                   };

                   var SaveFunc = function (element) {
                       var row = element.parentNode.parentNode;
                       row.cells[0].innerHTML = document.getElementById("edittype").value;
                       row.cells[1].innerHTML = document.getElementById("editname").value;
                       row.cells[2].innerHTML = document.getElementById("editcode").value;
                       row.cells[3].innerHTML = document.getElementById("editadditional").value;
                       row.cells[4].innerHTML = '<input type="button" value="修改" οnclick="EditFunc(this)"/><input type="button" value="删除" οnclick="DelFuc(this)"/>';
                   };

                   Init();
                   //AddRow();
                   if (document.getElementById('productAttributeBlock').tBodies[0].rows.length===0)
                   {
                    document.getElementById('productAttributeBlock').tBodies[0].appendChild(AddRow());
                   }
                   
               </script>
               <!--产品属性处理结束-->

整个关键在于：row.rowIndex巧好等于table.tBodies[0].row[index]这里的行索引数+1!!!

注意： 

1，table.tBodies[0].row[index]代表实际的行。这里的index指的是当前表格试图的从0开始的索引号。

tableObject.deleteRow(index)

Value Description
index An integer that specifies the position of the row to delete (starts at 0). The value of -1 can also be used; which result in that the last row will be deleted.

2，row.rowIndex：

The rowIndex property returns the position of a row in the rows collection of a table.

转载于:https://www.cnblogs.com/hongjiumu/archive/2012/09/06/2674056.html