Вставить строки в таблицу

Question

Каков наилучший простой способ использования JavaScript для вставки X-строк в таблицу в IE.

HTML-код таблицы выглядит следующим образом:

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

Что мне нужно сделать, так это удалить старое тело и вставить новое с 1000 строками.У меня есть 1000 строк в виде строковой переменной Javascript.

Проблема в том, что таблица в IE не имеет функцииinnerHTML.Я видел много лайфхаков для этого, но хочу увидеть ваш лучший.

Примечание:использование jquery или любого другого фреймворка не считается.

Answer 1

Вот отличная статья парня, который реализовал IE innerHTML= на как он заставил IE делать tbody.innerHTML="<tr>...":

Сначала я подумал, что IE не способен выполнить перерисование для модифицированных таблиц с innerhtml, но потом я вспомнил, что отвечал за это ограничение!

Кстати, трюк, который он использует, заключается в том, как это делают все фреймворки. table/tbody элементы.

Редактировать:@mkoryak, твой комментарий говорит мне, что у тебя нулевое воображение и ты не заслуживаешь ответа.Но я все равно тебя рассмешу.Ваши баллы:

>он не вставляет то, что мне нужно

Что?Он вставляет строки (которые у него есть в виде строки html) в table элемент.

>он также использует дополнительный скрытый элемент

Целью этого элемента было продемонстрировать, что все, что нужно IE, — это «контекст».Вместо этого вы можете использовать элемент, созданный на лету (document.createElement('div')).

>а еще статья старая

Больше я тебе никогда не помогу ;)

А если серьезно, если вы хотите увидеть, как это реализовали другие, взгляните на исходный код jQuery. jQuery.clean(), или прототип Element._insertionTranslations.

Answer 2

Сделайте так, как это делает jQuery, например.добавлять <table> и </table> вокруг него вставьте в документ и переместите нужные узлы туда, куда вы хотите, и откажитесь от временного элемента.

Answer 3

код в итоге оказался таким:

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

Вещи, которые должны были существовать заранее:таблица, имеющая тело с идентификатором «bodyId».$body — это глобальная переменная (или функция имеет замыкание), и там тоже есть немного jquery, потому что IE не оценивает сценарии, которые вставляются в html на лету.

Answer 4

У меня была та же проблема (как и у многих других людей), и после долгих игр я получил вот что.

Вам нужно создать tr через document.createelement('tr'), а затем таким же образом создать td.addchild td к tr, addchild the tr к tbody (не таблице). ТОГДА вы можете встроить HTML созданный вами td, и он будет работать.Это был ie8, который я использовал.По сути, структура таблицы должна быть создана с помощью createelement, но остальная часть может быть обработана с помощью внутреннего HTML.Я делал это, наблюдая за отладчиком IE8, и он говорил, что добавит его (если бы я сделал tr.innerhtml="blah") и не выдал бы никакой ошибки, но он не отображался, а представление html dom показывало очень сломанную table (ни один td никогда не появлялся, но был /td)

Итак, когда я, наконец, выполнил tr AND td с помощью вызовов createelement, он создал правильно выглядящий dom и правильно отрисовал страницу.