Добавить tr в таблицу в IE - PullRequest
Новая
       2

Добавить tr в таблицу в IE

2 голосов
/ 30 августа 2011

У меня есть структура таблицы: 

<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 без jQuery.

Ответы [ 3 ]

2 голосов
/ 30 августа 2011

Существуют специальные функции для создания ячеек таблицы (и строк), например - 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 есть что-то для вставки строк и ячеек

1 голос
/ 30 августа 2011

попробуйте 

<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>
1 голос
/ 30 августа 2011

Во-первых, этот 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, на которой вы тестируете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...