<!--产品属性处理部分开始--> <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.