<!--产品属性处理部分开始-->
<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 Descriptionindex 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
相关资源：动态添加,移除View及使用RadioButton实现底部Tab效果
