js给表格增加一行总结
大概看了一下网上对表格增加一行的js方法,基本上有两个方法
其中用到的childNodes方法在IE下与火狐下得到的DOM不同,table节点下均有tbody节点,但是IE获得tbody为表格Dom.childNodes[0], 火狐获得tbody为表格Dom.childNodes[1]。故需要两种写法
<script type="text/javascript">
方法一
function addRow1(){
var myTab = document.getElementById("myTab"); //"myTab"为表格的id
var index = myTab.rows.length;
//alert(index); //table共有几行
//var cellsize = myTab.childNodes[1].childNodes[0].cells.length; //火狐下
var cellsize = myTab.childNodes[0].childNodes[0].cells.length; //IE下
alert(cellsize); //一行有几列
var objRow = myTab.insertRow(index);
//var objCell = objRow.insertCell(0);
//objCell.innerHTML= "行号:"+index +"列号:1";
//var objCell = objRow.insertCell(1);
//objCell.innerHTML= "行号:"+index +"列号:2";
//var objCell = objRow.insertCell(2);
//objCell.innerHTML= "行号:"+index +"列号:3";
//var objCell = objRow.insertCell(3);
//objCell.innerHTML= "行号:"+index +"列号:4";
for(var i=0;i<cellsize;i++){
var objCell = objRow.insertCell(i);
objCell.innerHTML = i ;
}
objCell.style.color = "red";
}
方法二
var rowNum = 0;
function addRow2(){
var myTab = document.getElementById("myTab");
var objRow = document.createElement("tr");
for(var i=0;i<3;i++){
var objCell = document.createElement("td");
var tn = document.createTextNode(rowNum);
objCell.appendChild(tn);
objRow.appendChild(objCell);
}
rowNum++;
myTab.childNodes[0].appendChild(objRow); //IE
myTab.childNodes[1].appendChild(objRow); //火狐
}
</script>