日期:2014-05-16  浏览次数:20324 次

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>