ie和firefox操作table对象的异同-白红宇

ie和firefox操作table对象的异同

阅读量：2385 次

发布时间：2019-05-10

本文共 1742 字，大约阅读时间需要 5 分钟。

ie和firefox下操作table对象的异同【测试浏览器版本：ie为8,9，firefox为2.0】

1）在ie下，table标签直接使用appendChild增加document.createElement('tr')的行时不显示，但是在firefox下是没有问题的。如下

                <table id="table1" border='1'></table> 
                <script type='text/javascript'> 
                var tb=document.getElementById('table1'); 
                var tr=document.createElement('tr'),td=document.createElement('td'); 
                td.innerHTML=new Date(); 
                tr.appendChild(td);//行增加单元格 
                tb.appendChild(tr);//表增加行 
                </script> 

运行上面的代码后，和描述一样吧。

注意：tr

.innerHTML

=“”；这句话在ie下不能使用

解决办法就是在table标签内增加tbody标签，tbody使用appendChild时在ie和firefox下都可以显示了。

                <table border='1'><tbody id="tbody1"></tbody></table> 
                <script type='text/javascript'> 
                var tb=document.getElementById('tbody1'); 
                var tr=document.createElement('tr'),td=document.createElement('td'); 
                td.innerHTML=new Date(); 
                tr.appendChild(td);//行增加单元格 
                tb.appendChild(tr);//表增加行 
                </script> 

2）

使用insertRow和insertCell插入行和单元格时需要注意的 ，在ie下可以不传递行号和列号，但是如果在firefox下，必须要传递，要不出错。【insertRow和insertCell可以为table标签也可以为tbody标签，这两则都可以用】如下

                <table id="table2" border='1'></table> 
                <script type='text/javascript'> 
                var tb=document.getElementById('table2'); 
                var tr=tb.insertRow(),td=tr.insertCell(); 
                td.innerHTML=new Date(); 
                </script> 

运行上面的代码在ie下可以插入行和单元格，但是在firefox下出现“uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///E:/IISDebug/ajax/table.htm :: <TOP_LEVEL> :: line 32" data: no]”的错误

解决办法就是把行号和列号作为参数传入

但是要注意，传递的行号不能大于当前的行的长度，如已经有2行，你可以传递2，但是不能传递3。就如同强类型语言的数组一样，不能越界

               <table id="table3" border='1'></table> 
               <script type='text/javascript'> 
               var tb=document.getElementById('table3'); 
               var tr=tb.insertRow(tb.rows.length)//这样传递，插入在最后，你也可以传递其他的 
                 ,td=tr.insertCell(0); 
               td.innerHTML=new Date(); 
               </script> 

参考：

转载于:https://my.oschina.net/winHerson/blog/140429

你可能感兴趣的文章