利用javaScript动态添加表格行

最新推荐文章于 2025-10-15 12:43:01 发布

原创最新推荐文章于 2025-10-15 12:43:01 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #button #border #存储 #ie

本文介绍了一种使用JavaScript动态向HTML表格中添加行的方法，并解决了该方法在Firefox浏览器中的兼容性问题。通过指定插入行和单元格的位置，可以确保代码在不同浏览器中都能正常工作。

本文简单介绍如何利用javaScript动态添加表格行，关键是解决firefox无法添加的问题。

网上大部分是这样的

function addRow(content) 
{ 
    //添加一行 
    var newTr = listTable.insertRow(); 
    //添加一列 
    var newTd0 = newTr.insertCell(); 
    //设置列内容和属性 
    newTd0.innerHTML = content; 
} 
<input type="button" name="Submit" value="添加一行" onclick="addRow("dddddddd")" /> 
<table id="listTable" border=1 cellspacing="0" bordercolor="#CCCCCC"> 
</table> 

这样写在IE下没问题，但是在Firefox就不显灵了，如果你利用try　catch可以看到出错信息，大概是缺少参数,表格的行列添加时要指定是第几行和第几列。换成这样就没问题了。

function addRow(content) 
{ 
try{
    //添加一行 
    var newTr = listTable.insertRow(0); 
    //添加一列 
    var newTd0 = newTr.insertCell(0); 
    //设置列内容和属性 
    newTd0.innerHTML = content; 
} catch(e){alert(e);}
} 