如何通過javascript代碼添加整個表格？

我想使用js函數將表添加到HTML頁面中。
我看到很多添加\從現有表中刪除數據的例子，但找不到添加之前不存在的新表的示例。
我在裏面的JavaScript變量與我需要的表的所有信息，現在我只需要找到一種方法來做到這一點...讓我們假設我的變種是v1，v2，v3，v4，我想創造如下表：如何通過javascript代碼添加整個表格？

v1 v2 
v3 v4

什麼是正確的代碼將執行上述？

來源

2011-07-30 inbali

'wrapper.innerHTML = '

' + V1 + '' + V2 + '' + V3 + '' + V4 + '

';'其中'wrapper'是對某個要放置表的DOM元素的引用。如果行數/單元格數量不固定，我推薦一個動態創建HTML字符串的函數。 –

發佈您找到的示例，也許我們可以幫助您修改它們。 – Sparky

開始var tableElem = document.createElement('table')

來源

2011-07-30 17:26:08

從零開始製作蘋果派... –

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/

來源

2011-07-30 17:26:29 user113716

假設你正在使用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}));

，我虛心地建議你完全應該。

來源

2011-07-30 17:27:33

只需要加載jQuery來創建表格？矯枉過正？ – user113716

我打算使用單行表格，因爲它的格式與您的文章的原始版本相似，但修改我的答案對於任意數量的行非常容易;它會更加冗長。 –

@patrick不，當然不是:)我只是說，jQuery如今被廣泛使用，OP有95％的可能性使用它，或者它將覆蓋任何項目中的許多基礎。 –

剛剛創建表的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（表）和創建表中的所有元素的表，但使用字符串的第一種方式更快。

希望這有助於

來源

2011-07-30 17:27:36 wezzy

document.createElement比將文本解析爲元素要快得多。 – f0x

我懷疑與dom交互並且逐個創建所有元素它對CPU來說速度並不快，無論如何，我的意思是說它以更快的速度輸入這種方式 – wezzy

您可以使用jQuery追加您創建的代碼（即使不是強制性的，你需要的東西）：由帕特里克給出

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

建議肯定是更優雅。這個可以讓你創建每一個標籤，這樣就可以根據需要直接插入額外的樣式屬性。

來源

2011-07-30 17:29:00 Francesco

這甚至沒有接近有效的javascript – Dani

很多人在這裏的答案應該已經工作。

但是！某些版本的Internet Explorer在創建後無法更改<table>元素的內容。所以你不能總是使用tableElement.appendChild(trElement)。

但是，您可以使用innerHTML來代替表格的html內容 - 這是有效的。

來源

2011-07-30 17:30:49 Flambino

我認爲你的關於IE的陳述太寬泛。你當然可以改變IE中表格的內容。關於你在哪裏可以使用'innerHTML'，只有一些問題。 [這是一篇有趣的文章]（http://www.ericvasilik.com/2006/07/code-karma.html），來自一位參與實現IE的innerHTML的人。 *「起初，我認爲IE不能對帶有innerHTML的修改過的表格進行重繪，但後來我想起了我對這個限制負責！」* – user113716

@patrick dw：確實寬泛且不精確，是還有其他方法。我只是想指出，表格是DOM操作的特例。感謝您的鏈接 - 有趣的閱讀！ – Flambino

如何通過javascript代碼添加整個表格？

回答

相關問題