Обновить HTML-код tbody с помощью javascript (без библиотеки): возможно?

#javascript #html #internet-explorer #innerhtml

#javascript #HTML #internet-explorer #innerhtml

Вопрос:

Я хочу обновить содержимое TBODY (не всю ТАБЛИЦУ целиком, потому что в ней гораздо больше полумета-данных (LOL)). Я получаю > = 0 TR с сервера (XHR) и хочу увеличить их в существующей таблице. Новые TR должны перезаписывать существующее содержимое TBODY.

Я создал очень простой, статический пример на jsFiddle, который работает в Chrome и, вероятно, во всех остальных, за исключением IE (я использую Chrome только и тестирую в IE8).

В Chrome работает самая первая попытка: добавьте TR в TBODY. Нет проблем!
В IE этого не происходит… Я включил нерабочий пример того, что я имел в виду, чтобы заставить его работать.

Я уверен, что эта проблема не нова: как бы я вставил строку с TR в существующий TBODY?

PS. У jQuery нет проблем с этим!? Он используется здесь на SO. jQuery что-то делает с HTML, а затем вставляет его в виде HTML-узлов ..? Или что-то еще? Я не могу прочитать эту сумасшедшую библиотеку. Это происходит в этом файле (ищите "html: function(" . Вот где начинается волшебство.

У кого-нибудь есть функция или идея, чтобы это работало без библиотеки JS?

Ответ №1:

Вот хороший ресурс о проблемах innerHTML и IE.

Суть в том, что свойство on tbody innerHTML доступно только для чтения.

Вот решение, представленное в одном из комментариев:

 var innerHTML = "<tr><td>Hello world!</td></tr>";
var div = document.createElement("DIV");
div.innerHTML = "<table>"   innerHTML   "</table>";
// Get the tr from the table in the div
var trElem = div.getElementsByTagName("TR")[0];

Что касается части вопроса jQuery:

 //inside the html() function:
// If using innerHTML throws an exception, use the fallback method
} catch(e) {
  this.empty().append( value );
}

//inside the empty() function (basically removes all child nodes of the td):
while ( elem.firstChild ) {
  elem.removeChild( elem.firstChild );
}

//append calls domManip applying this to all table rows:
if ( this.nodeType === 1 ) {
  this.appendChild( elem );
}

//domManip as far as I can tell creates a fragment if possible and calls the three lines above with this=each row in turn, elem=the tbody(created if missing)

1. Ага… Я пытаюсь сбросить TR в DIV. Не работает. Какого черта я не додумался поместить их в ТАБЛИЦУ?? ЛОЛ, я собираюсь попробовать это! редактировать Но что делает jQuery? jQuery не знает, что он к чему добавляет… Я знаю, что у меня есть TBODY и TR.

2. Идеально: jsfiddle.net/rudiedirkx/hZUkW Большое спасибо! (Хотя все еще любопытно, как jQ это делает …)

3. Что случилось с твоими дурацкими цитатами?

4. Извините за цитаты 🙂 скопируйте и вставьте из комментария, который я упомянул

5. Как создаются фрагменты в / by domManip ? Вы можете вставить только (несколько!) TR находится в TBODY или ТАБЛИЦЕ (и даже не напрямую!)… value In .append(value) содержит несколько TR, поэтому это несколько узлов (но строка). Как эта строка становится фактическими объектами узла для добавления?? Я видел код jQ. Я все еще не понимаю =)

Ответ №2:

Используя обычный JavaScript, вы можете установить innerHTML свойство соответствующего элемента. Текст, который вы задаете, может содержать сочетание HTML и text. Он будет проанализирован и добавлен в DOM.