テーブル全体をJavaScriptコードで追加するには？

Question

js関数を使用して、HTMLページにテーブルを追加しようとしています。
既存のテーブルからデータを削除する例がたくさんありましたが、これまで存在していなかった新しいテーブルを追加する例は見つかりませんでした。
私はテーブルのために必要なすべての情報を持つJavaScript変数を内部に持っていますが、今はそれを行う方法を見つける必要があります...私のvarがv1、v2、v3、v4であり、次の表：

v1 v2 
v3 v4 

上記を実行する正しいコードは何ですか？

Answer 1

var tableElem = document.createElement('table')

Answer 2

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 3

あなたはjQueryのを使用しているあなたは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})); 

のようなものになるだろうと仮定すると、私は謙虚にあなたが完全にすべきだとお勧めします。

Answer 4

ちょうどあなたのテーブルの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（テーブル）を使用して、テーブル内のすべての要素を作成するテーブルを構築することができますしかし、文字列を使用する最初の方法は高速です。

・ホープこれはあなたが（あなたが必要なもののためにも、そうでない場合は必須）あなたが作成したコードを追加するjQueryのを使用することができ

Answer 5

に役立ちます：パトリックによって与えられた

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

提案は確かに、よりエレガントです。これにより、それぞれの単一のタグを作成できるので、必要に応じて追加のスタイル属性を直接挿入することができます。

Answer 6

ここでの回答はたくさんあります。

BUT！一部のバージョンのInternet Explorerでは、作成された<table>要素の内容を変更できません。たとえば、いつもtableElement.appendChild(trElement)を使うことはできません。

しかし、innerHTMLを使用して、代わりにテーブルのhtmlコンテンツを置き換えることができます。