Какой самый простой способ добавить TR в таблицу по javascript?

Если идентификатор таблицы известен - так что таблицу можно получить с помощью docoument.getElementById(table_id) - как я могу добавить элемент TR в эту таблицу самым простым способом?Какой самый простой способ добавить TR в таблицу по javascript?

ВУ выглядит следующим образом:

<tr><td><span>something here..</span></td></tr>

источник

2009-05-29 omg

Первый использует методы DOM, а второй использует нестандартную, но широко supprted innerHTML

var tr = document.createElement("tr"); 
var td = document.createElement("td"); 
var span = document.createElement("span"); 
var text = document.createTextNode("something here.."); 
span.appendChild(text); 
td.appendChild(span); 
tr.appendChild(td); 

tbody.appendChild(tr);

ИЛИ

tbody.innerHTML += "<tr><td><span>something here..</span></td></tr>"

источник

2009-05-29 14:26:09

Остерегайтесь, что решение, использующее InnerHtml, не поддерживается всеми браузерами. – clamchoda

Использование JQuery:

$('#table_id > tbody').append('<tr><td><span>something here..</span></td></tr>');

Я знаю, что некоторые из них могут передергивает при упоминании JQuery. Включение рамки для этой цели, вероятно, слишком велико. но я редко нахожу, что мне нужно всего лишь «просто одно» с javascript. Ручное кодирование - это создание каждого из необходимых элементов, затем добавление их в правильную последовательность (от внутренней к внешней) к другим элементам, а затем, наконец, добавление новой строки в таблицу.

источник

2009-05-29 14:25:59 tvanfosson

только если он использует JQuery –

+1 По моему опыту jQuery никогда не переборщил. –

Сколько кода нужно разрабатывать, прежде чем имеет смысл использовать фреймворк? Я написал достаточно обработанный вручную javascript, что я обнаружил, что начиная с рамки почти всегда правильный путь. – tvanfosson

Если вы не против того, чтобы с помощью JQuery, вы можете использовать либо из следующего, где «tblId» является идентификатором вашей таблицы, а «_html» представляет собой строковое представление вашей таблицы строк:

$(_html).insertAfter("#tblId tr:last");

или

$("#tblId tr:last").after(_html);

источник

2009-05-29 14:26:42

Действительно простой пример:

<html> 
<table id = 'test'> 
    <tr><td>Thanks tvanfosson!</td></tr> 
</table> 
</html> 

<script type="text/javascript" charset="utf-8"> 
    var table = document.getElementById('test'); 
    table.innerHTML += '<tr><td><span>something here..</span></td></tr>'; 
</script>

источник

2009-05-29 14:27:44 MrHus

Это заменит все существующие строки одной строкой. Наверное, не то, что нужно. – tvanfosson

Спасибо, что добавили знак плюса. – MrHus

Знаете ли вы, почему я скопирую ваш код в пустой HTML-файл и все еще не могу заставить его работать в IE7? – clamchoda

Наиболее простой, соответствуют стандартам и библиотека-независимый метод для вставки строка таблицы использует the insertRow method объекта таблицы.

var tableRef = document.getElementById(tableID); 

// Insert a row in the table at row index 0 
var newRow = tableRef.insertRow(0);

P.S. Работает также в IE6, хотя иногда это может иметь некоторые причуды.

источник

2009-05-29 14:31:38

Я использую эту функцию, чтобы добавить кучу строк в таблицу. его примерно на 100% быстрее, чем jquery для больших кусков данных. единственным недостатком является то, что если ваши строки имеют теги сценария внутри них, сценарии обыкновение выполняться при загрузке в IE

function appendRows(node, html){ 
    var temp = document.createElement("div"); 
    var tbody = node.parentNode; 
    var nextSib = node.nextSibling; 

    temp.innerHTML = "<table><tbody>"+html; 
    var rows = temp.firstChild.firstChild.childNodes; 

    while(rows.length){ 
     tbody.insertBefore(rows[0], nextSib); 
    } 
}

где узел является строка для добавления после и HTML является строки для добавления

источник

2009-05-29 14:37:19 mkoryak

-2

Я использую это, работает тихо:

var changeInnerHTMLOfMyCuteTbodyById = function (id_tbody, inner_html) 
{ 
    //preparing 
    var my_tbody = document.getElementById (id_tbody); 
    var my_table = my_tbody.parentNode; 

    my_table.removeChild (my_tbody); 

    //creating dom tree 
    var html = '<table style=\'display:none;\'><tbody id='+ id_tbody+'>' + 
inner_html + '</tbody></table>'; 

    var tmp_div = document.createElement ('div'); 

    tmp_div.innerHTML = html; 

    document.body.appendChild (tmp_div); 

    //moving the tbody 
    my_table.appendChild (document.getElementById (id_tbody)); 
}

Вы можете сделать это:

changeInnerHTMLOfMyCuteTbodyById('id_tbody', document.getElementById ('id_tbody').innerHTML + '<tr> ... </tr>');

источник

2009-07-23 04:19:49 Mahomedalid

Какой самый простой способ добавить TR в таблицу по javascript?

ответ

Смежные вопросы