Append tr in table in IE_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-31 12:13 出处：网络

I have a table structure: <table id=\"tableId\"> <tbody id=\"tbodyId\"> <tr id=\"trId1\">

I have a table structure:

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

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

 </tbody>
</table>

I am adding new row with simple Javascript like this:

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

All works fine in Firefox but row is not appended in IE. New table after it in Firefox becomes:

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

 &开发者_运维技巧lt;/tbody>
</table>

I saw other codes and help. I only want one tbody in this table with simple Javascript no jQuery.

There are special functions for creating table cells ( and rows ) eg - insertRow for rows and insertCell for cells - it works in all browsers

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

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

...

PS. I think DOJO Framework have something for inserting rows and cells

First off, this jsfiddle works fine in FF6 & IE8

Make sure that your real html has the proper markup. Your example shows a closing tbody element without the slash

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

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

IE is inconsistant with its acceptance of bad markup.

In addition, code like this:

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

Is exactly the sort of code that toolkits like dojo (and its smarter cousin, jQuery) are built to avoid. I suspect the code for creating a new row are different in the version of IE you're testing on.

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>