ie和FF 在insertRow和insertCell的区别

最新推荐文章于 2020-12-27 20:30:07 发布

原创最新推荐文章于 2020-12-27 20:30:07 发布 · 1.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ie #table #class #border #function

本文探讨了Internet Explorer (IE) 和Firefox (FF) 浏览器中使用insertRow和insertCell方法创建表格元素时存在的差异。特别指出在FF中需要指定-1作为参数以正确地在表格末尾添加行和单元格。

在ie和FF中 insertRow和insertCell有着一个小小的区别，

有ie中可以这样调用：

var bgame_table = document.getElementById('game_table');
nowTR = bgame_table.insertRow();

nowTD = nowTR.insertCell();

但在ff中，上面这样调用就会报错了：

FF和ie都可以这要调用：

var bgame_table = document.getElementById('game_table');
nowTR = bgame_table.insertRow(-1);

nowTD = nowTR.insertCell(-1);

-1代表什么意思呢？

原来-1代表：插入(行)单元格到 cells(rows) 集合内的最后一个。

ie默认值了-1,但FF就没有默认值的。

所以为了兼容性好，我建议大家都是加上-1

例子：

<html>
<script>
function testinsert(){
var bgame_table = document.getElementById('game_table');
nowTR = bgame_table.insertRow(-1);
with(nowTR){
nowTD = insertCell(-1);

nowTD.className = 'b_hline';
nowTD.innerHTML ="00聯盟";

nowTD = nowTR.insertCell(-1);
nowTD.align = 'left';
nowTD.innerHTML ="1111a---队 b 队了";

nowTD = nowTR.insertCell(-1);

nowTD.align = 'left';
nowTD.innerHTML ="222 b 队了";

nowTD = nowTR.insertCell(-1);

nowTD.innerHTML ="3333a---队了";

nowTD = nowTR.insertCell(-1);

nowTD.innerHTML ="4444a---队了";

}

nowTR2 = bgame_table.insertRow(-1);
with(nowTR2){
nowTD = insertCell(-1);

nowTD.className = 'b_hline';
nowTD.innerHTML ="00聯盟";

nowTD = nowTR2.insertCell(-1);
nowTD.align = 'left';
nowTD.innerHTML ="1111a---队 b 队了";

nowTD = nowTR2.insertCell(-1);

nowTD.align = 'left';
nowTD.innerHTML ="222 b 队了";

nowTD = nowTR2.insertCell(-1);

nowTD.innerHTML ="3333a---队了";

nowTD = nowTR2.insertCell(-1);

nowTD.innerHTML ="4444a---队了";

}
}
</script>
<body onload="testinsert()">
<table id="game_table" width="526" border="0" cellspacing="1" cellpadding="0" class="b_tab" >
<tr class="b_tline_fu">
<td width="40" >時間</td>
<td width="200">主客a</td>

<td width="110" nowrap>foot</td>
<td width="110" nowrap>大小</td>
<td width="50">單雙</td>
</tr>
</table>
</body>

</html>