Question

我有一个表结构：

<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>

我看到了其他代码和帮助。我只想在这个表中使用简单的Javascript no jQuery。

Answer 1

有创建表格单元格（和行）的特殊功能，例如 - 行的insertRow和单元格的insertCell - 它适用于所有浏览器

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

var cell = newItemNode.insertCell( 0 );
cell.innerHTML = 'id';

...

PS。我认为DOJO Framework有一些用于插入行和单元格的东西

Answer 2

首先，this jsfiddle在FF6＆amp; 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版本中有所不同。

Answer 3

试试这个

<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>

在IE中的表中附加tr

3 个答案: