Javascript 在IE中的表中追加tr_Javascript_Html Table

Javascript 在IE中的表中追加tr

javascript

Javascript 在IE中的表中追加tr,javascript,html-table,Javascript,Html Table,我有一个表结构： <table id="tableId"> <tbody id="tbodyId"> <tr id="trId1"> <td>id</td><td>name</td> </tr> </tbody> </table> idname 我正在使用简单的Javascript添加新行，如下所示： var itemsContainer = doj

我有一个表结构：

<table id="tableId">
 <tbody id="tbodyId">

  <tr id="trId1">
   <td>id</td><td>name</td>
  </tr>

 </tbody>
</table>


idname

我正在使用简单的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);

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

var itemsContainer=dojo.byId（'tbodyId'）；
itemCount++//它将向tr提供id，即trId2
var newItemNode=document.createElement（'tr'）；
setAttribute（“id”，“trId”+itemCount）；
newItemNode.innerHTML='idanotherName'；
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>


idname
伊达诺瑟纳姆

我看到了其他代码和帮助。我只希望这个表中有一个tbody，没有jQuery的简单Javascript。

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

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

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

另外，我认为DOJO框架具有插入行和单元格的功能，首先，在FF6和IE8中工作良好

确保真正的html具有正确的标记。您的示例显示了一个不带斜杠的结束

tbody

元素

  <tr id="trId2">
   <td>id</td><td>anotherName</td>
  </tr>

 <tbody> <!-- This line should be </tbody> -->


伊达诺瑟纳姆

IE不同意接受不好的加价

此外，代码如下所示：

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

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

var newItemNode=document.createElement（'tr'）；
setAttribute（“id”，“trId”+itemCount）；
newItemNode.innerHTML='idanotherName'；

这正是像dojo（及其更聪明的表亲jQuery）这样的工具包构建时要避免的代码类型。我怀疑用于创建新行的代码与您正在测试的IE版本不同。

试试这个

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


函数kk（）
{
var itemsContainer=document.getElementById（“tbodyId”）；
var newItemNode=document.createElement（'tr'）；
setAttribute（“id”，“trId”+1）；
var newCellItem1=document.createElement（'td'）；
newCellItem1.innerHTML=“id”；
var newCellItem2=document.createElement（'td'）；
newCellItem2.innerHTML=“其他名称”；
appendChild（newCellItem1）；
appendChild（newCellItem2）；
appendChild（newItemNode）；
}
idname

在“我的代码”中关闭。这是一个有问题的打字错误。我正在检查的代码是相同的。对于行，您是正确的insertRow，insertCel适用于所有浏览器。