在IE的表格中添加tr

Append tr in table in IE

本文关键字：添加 tr 表格 IE      更新时间：2023-09-26

我有一个表结构:

<table id="tableId">
 <tbody id="tbodyId">
  <tr id="trId1">
   <td>id</td><td>name</td>
  </tr>
 </tbody>
</table>

我添加新的行与简单的Javascript像这样:

var itemsContainer = dojo.byId('tbodyId');
itemCount++; //it will give id to tr i.e. trId2
var newItemNode = document.createElement('tr');
newItemNode.setAttribute("id", 'trId' + itemCount);
newItemNode.innerHTML ='<td>id</td><td>anotherName</td>';
itemsContainer.appendChild(newItemNode);

在Firefox中都可以正常工作，但在IE中没有添加行。在Firefox中，它之后的新表变成:

<table id="tableId">
 <tbody id="tbodyId">
  <tr id="trId1">
   <td>id</td><td>name</td>
  </tr>
  <tr id="trId2">
   <td>id</td><td>anotherName</td>
  </tr>
 </tbody>
</table>

我看到了其他代码和帮助。

有用于创建表格单元格(和行)的特殊函数，例如-用于行的insertRow和用于单元格的insertCell -它适用于所有浏览器

var newItemNode = itemsContainer.insertRow( itemsContainer.rows.length - 1 );
newItemNode.setAttribute("id", 'trId' + itemCount);
var cell = newItemNode.insertCell( 0 );
cell.innerHTML = 'id';

…

p。我认为DOJO框架有插入行和单元格的东西

首先，这个jsfiddle在FF6中工作得很好&IE8

确保你真正的html有正确的标记。您的示例显示了没有斜杠

的结束tbody元素。
  <tr id="trId2">
   <td>id</td><td>anotherName</td>
  </tr>
 <tbody> <!-- This line should be </tbody> -->

IE与它对不良标记的接受不一致。

另外，像这样的代码:

var newItemNode = document.createElement('tr');
newItemNode.setAttribute("id", 'trId' + itemCount);
newItemNode.innerHTML ='<td>id</td><td>anotherName</td>';

正是dojo(以及它更智能的表亲jQuery)之类的工具包所要避免的那种代码。我怀疑用于创建新行的代码在您正在测试的IE版本中是不同的。

try this

<html>
<script language = "javascript">
function kk()
{
    var itemsContainer = document.getElementById("tbodyId");
    var newItemNode = document.createElement('tr');
    newItemNode.setAttribute("id", 'trId' + 1);
    var newCellItem1 = document.createElement('td');
    newCellItem1.innerHTML = "id";
    var newCellItem2 = document.createElement('td');
    newCellItem2.innerHTML = "anotherName";
    newItemNode.appendChild(newCellItem1);
    newItemNode.appendChild(newCellItem2);
    itemsContainer.appendChild(newItemNode);
}
</script>
<table id="tableId">
 <tbody id="tbodyId">
  <tr id="trId1">
   <td>id</td><td>name</td>
  </tr>

 </tbody>
</table>
<input type="button" value = "heihei" onclick = "kk();"></input>
</html>
相关文章：