Как добавить всю таблицу с помощью кода JavaScript?

Question

Я пытаюсь добавить таблицу на HTML-страницу, используя функцию js.
Я видел много примеров добавления \ удаления данных из существующей таблицы, но не могу найти пример добавления новой таблицы, котораяраньше не существовало.
У меня внутри переменных javascript есть вся необходимая для таблицы информация, теперь мне нужно только найти способ сделать это ... допустим, мои переменные v1, v2, v3, v4 и я хочу создать следующую таблицу:

v1  v2
v3  v4

Какой правильный код будет выполнять вышеуказанное?

Answer 1

var v1 = 'v1', 
    v2 = 'v2', 
    v3 = 'v3', 
    v4 = 'v4';

var table = document.createElement('table');

var row = table.insertRow(0);
row.insertCell(0).innerHTML = v1;
row.insertCell(1).innerHTML = v2;

row = table.insertRow(1);
row.insertCell(0).innerHTML = v3;
row.insertCell(1).innerHTML = v4;

document.body.appendChild( table );

Пример: http://jsfiddle.net/XPpNF/1/

Answer 2

Многие ответы здесь уже должны работать.

НО! Некоторые версии Internet Explorer не могут изменять содержимое элемента <table> после его создания.Так что вы не всегда можете использовать tableElement.appendChild(trElement), например.

Но вы можете использовать innerHTML вместо html-содержимого таблицы - это работает.

Answer 3

Начните с var tableElem = document.createElement('table')

Answer 4

Вы можете использовать jQuery для добавления созданного вами кода (даже если он не обязателен для того, что вам нужно):

var table += <table>
table += <tr> ... loop over your data variables to fill data ...
table += </tr>
table += </table>
§("# your wished table-id").html(data);

Предложение, данное Патриком, безусловно, более элегантно.Этот позволяет вам создавать каждый отдельный тег, так что, возможно, вы можете напрямую вставлять дополнительные атрибуты стиля по мере необходимости.

Answer 5

просто создайте HTML-код вашей таблицы и добавьте его в существующий div, например:

var html = "<table";
html += "<tr><td>v1</td><td>v2</td></tr>";
html += "<tr><td>v3</td><td>v4</td></tr>";
html += "</table>";
document.getElementById('idOfYourDiv').innerHTML = html;

Вы также можете построить таблицу, используя document.createElement (table) и создав все элементы внутритаблица, но первый способ использования строки быстрее.

Надеюсь, это поможет

Answer 6

Если вы используете jQuery, это будет что-то вроде

var awesomeTable = $("<table/>");
$("#parentElement").append(awesomeTable);

var awesomeTr = $("<tr/>");
awesomeTable.append(awesomeTr);

awesomeTr
    .append($("<td/>", {html: v1}))
    .append($("<td/>", {html: v2}))
    .append($("<td/>", {html: v3}))
    .append($("<td/>", {html: v4}));

Если вы не используете jQuery, я смиренно советую вам полностью это сделать.