在网上看到一段通过对节点的控制增加或删除一行table的代码如下:
无标题文档//给table增加一行
function addTableRow() {
var table1 = document.getElementById('table1');
var cloneTab = document.getElementById('table2');
//alert(cloneTab.firstChild.firstChild.innerHTML);
//alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
var v= table1.firstChild.childNodes;
var len = v.length;
for(var i=1;i
v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值
}
}
//给table删除一行
function delTableRow(){
var table1 = document.getElementById('table1');
var isChecked = document.getElementsByName('isChecked');
var len = isChecked.length;
for(var i=len-1;i>=0;i--){
if(isChecked[i].checked==true){
table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//alert(isChecked[i].id);
//alert(isChecked[i].parentNode.parentNode.innerHTML);
}
}
}
0 | 00 | 1 | 2 | 3 | 4 | 5 | 6 |
---|
请选择... 1 1 |
---|
因为我用的是div+css,所以将上面的代码改成如下:
无标题文档.box_quantity_box{ width:250px;
border:1px solid #7a4e25;
font-size:12px;
}
.box_quantity_top{background:#7a4e25;
color:#fefdfb;
width:100%;
height:30px;
}
.box_quantity_con{width:100%;
background:#fef0e5;
height:50px;
}
.box_quantity_ul{ list-style:none;
margin:0px;
padding:0px;
clear:both;
}
.box_quantity_li1{ float:left;
width:60px;
margin:8px 0px 0px 0px;
padding:0px;
text-align:center;
}
.box_quantity_li2{ float:left;
width:30px;
margin:8px 0px 0px 0px;
padding:0px;
text-align:center;
}
.txt1{width:55px;
background:#fef0e5;
border:1px solid #7a4e25;
height:15px;
font-size:12px;
color:#7a4e25;
}
.selecsty1{ width:50px;
background:#fef0e5;
border:1px solid #7a4e25;
height:15px;
font-size:12px;
color:#7a4e25;
}
.singlesty{background:#fef0e5;
color:#7a4e25;
}
.close{clear:both;}
.box_quantity_button {
border:1px solid #7a4e25;
width:47px;
height:17px;
background:#fefdfb;
color:#7a4e25;
cursor:pointer;
}
//给table增加一行
function addTableRow() {
var table1 = document.getElementById('table1');
var cloneTab = document.getElementById('table2');
alert(cloneTab.firstChild.firstChild.innerHTML);
alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
/* table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true)); */
table1.firstChild.appendChild(cloneTab.firstChild.cloneNode(true));
var v= table1.firstChild.childNodes;
var len = v.length;
for(var i=1;i
v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值
}
}
//给table删除一行
function delTableRow(){
var table1 = document.getElementById('table1');
var isChecked = document.getElementsByName('isChecked');
var len = isChecked.length;
for(var i=len-1;i>=0;i--){
if(isChecked[i].checked==true){
table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//alert(isChecked[i].id);
//alert(isChecked[i].parentNode.parentNode.innerHTML);
}
}
}
- 操作
- 哈哈1
- 哈哈2
- 哈哈3
- 哈哈4
新增
删除
呵呵
哈哈
啦啦
1
2
3