js手动统制表格添加和删除
日期：2014-05-16 浏览次数：20420 次
js手动控制表格添加和删除
最近帮一个网友做一个ecshop显示颜色和相关商品id，故把后台添加表格的js代码共享，，
js比较简单,可以在ie下运行，firefox无效...
<html>
<head>
<script>
function addRow(){
//添加一行
var newTr = testTbl.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>';
newTd1.innerHTML = '商品ID:<input type="text" name="colorGoodsId[]" /> <input type="button" value="删除行" onclick="delRow()"/>';
}
function delRow(){
//删除行
var delTr = testTbl.deleteRow();
//删除两列
var delTd0 = delTr.deleteCell();
var delTd1 = delTr.deleteCell();
//设置列内容和属性
delTd0.innerHTML = '';
delTd1.innerHTML = '';
}
</script>
</head>
<body>
<form action="postHandle.php" method="post">
<table id="testTbl" border=1>
<tr id="tr1">
<td width=240>
<input type="hidden" name="colorId1" id="colorId1" value="1"/>
颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>
</td>
<td id="b">
商品ID:<input type="text" name="colorGoodsId[]"/>
<input type="button" onclick="addRow()" value="添加一行"/>
</td>
</tr>
</table>
<input type="submit" value="提交"/>
</form>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
