需要幫助瓦特/ JavaScript和創建一個HTML表格陣列

Question

我試過了一切，我可以通過谷歌找到並沒有任何工作正常。輸出只是一行，其中列出了所有數組的內容。我需要的是一種寫入數組內容的方法，但在3個單元之後，會自動開始一個新行。我將發佈我在下面提供的代碼以及問題。 （是的，這是從分配。:(）

//***(8) place the words in the string "tx_val" in a table with a one pixel border, 
//*** with a gray backgound. Use only three cells per row. Empty cells should contain 
//*** the word "null". Show the table in the span block with id="ans8" 

var count = i % 3; 
var nrow = ""; 
var out = "<table border='1' bgcolor='gray'><tr>" 
for (var i=0; i<txArr.length; i++) 
{ 
    out += ("<td>" + txArr[i] + "</td>"); 
    count++; 
    if (count % 3 == 0) 
    { 
     nrow += "</tr><tr>"; 
    } 
} 

document.getElementById('ans8').innerHTML = out + nrow; 

Answer 1

我更喜歡使用過concatination

var html = []; 
html.push("<table><tr>"); 
var i = 0; 

for (var k in txArr) 
{ 
    if(i>=3){ 
     i=0; 
     html.push("</tr><tr>"); 
    } 
    html.push("<td>" + txArr[k] + "</td>"); 
    i++; 
} 
html.push("</tr></table>"); 

document.getElementById('ans8').innerHTML = html.join(''); 

// wrapped in function 
function arrayToTable(a,cols){ 
var html = []; 
    html.push("<table><tr>"); 
    var i = 0; 

    for (var k in a) 
    { 
     if(i>=cols){ 
      i=0; 
      html.push("</tr><tr>"); 
     } 
     html.push("<td>" + a[k] + "</td>"); 
     i++; 
    } 
    html.push("</tr></table>"); 
    return html.join('') 
} 
document.getElementById('ans8').innerHTML = arrayToTable(txArr, 3); 

Answer 2

這可能是一點點更容易的東西來完成這樣

buffer = "<table>"; 
for(var r = 0; r < 10; r++){ 
    buffer += "<tr>"; 
    for(var c = 0; c < 3 ; c++){ 
     buffer += "<td>Cell: " + r + ":" + c + "</td>"; 
    } 
    buffer += "</tr>"; 
} 
buffer += "</table>"; 
document.getElementById("ans8").innerHTML = buffer; 

這將每一行創建一個表30行長，3列。

Answer 3

您需要打印tr的表內（annd添加</table>！）：

var count = i % 3; // btw. what's this?? 
var nrow = ""; 
var out = "<table border='1' bgcolor='gray'><tr>" 
for (var i=0; i<txArr.length; i++) 
{ 
    out += "<td>" + txArr[i] + "</td>"; 
    count++; 
    if (count % 3 == 0) 
     out += "</tr><tr>"; 
} 
out += "</table>"; 

document.getElementById('ans8').innerHTML = out; 

Answer 4

您可能過早地將值分配給「計數」，因爲您不知道我現在還沒有。而且你並沒有把nrow的價值吐在任何地方......把它變成了現實。

var count; 
var nrow = ""; 
var out = "<table border='1' bgcolor='gray'><tr>" 
for (var i=0; i<txArr.length; i++) 

{ 
out += ("<td>" + txArr[i] + "</td>"); 
count++; 
if (count % 3 == 0) 
    { 
    out += "</tr><tr>"; 
    } 
} 

document.getElementById('ans8').innerHTML = out + nrow; 

Answer 5

基本上我會把它分成3個功能，以便於閱讀和維護。這些功能將包括創建單元格，行和表格。這絕對簡化了閱讀代碼。由於我沒有測試它，下面是我會做的一個例子。

function createTableCell(value) { 
    return value == null? "<td>NULL</td>":"<td>" + value + "</td>"; 
} 

function createTableRow(array) { 
    var returnValue = ""; 
    for (var i = 0; i < array.length; i++) { 
    returnValue = returnValue + createTableCell(array[i]); 
    } 
    return "<tr>" + returnValue + "</tr>"; 
} 

function arrayToTable(array, newRowAfterNArrayElements) { 
    var returnValue = "<table>"; 
    for (var i = 0; i < array.length; i = i + newRowAfterNArrayElements) { 
    returnValue = returnValue + createTableRow(array.split(i, (i + newRowAfterNArrayElements) - 1)); 
    } 
    return returnValue + "</table>"; 
} 

document.getElementById("ans8").innerHTML = arrayToTable(txArr, 3); 

此外，這使得您的代碼更加動態和可重用。假設你有一個你想在每4個元素分割的數組。而不是硬編碼，你可以簡單地通過一個不同的論點。

Answer 6

，而不是試圖寫出來的HTML，試圖操縱DOM的數組。這對我來說似乎更直截了當。看看下面的例子：

var row = table.insertRow(); msdn mdc
var cell = row.insertCell(); msdn mdc
var cellContent = document.createTextNode(txArr[i]); msdn mdc
cell.appendChild(cellContent); msdn mdc

決定何時開始一個新行，只需使用模運算符（% msdn mdc ）對i：

if (i % 3 == 0) 
{ 
    row = table.insertRow() 
} 

你想最終是這樣的：

var container = document.getElementById("ans8"); 
var t = container.appendChild(document.createElement("table")); 
var row; 
txArr.forEach(function (item, i) 
{ 
    if (i % 3 == 0) 
    { 
     row = t.insertRow() 
    } 
    row.insertCell().appendChild(document.createTextNode(item)); 
}); 

我會留下一點點讓你弄清楚 - 邊框，背景顏色，在那裏得到單詞「null」。畢竟是你的作業。 :-)

此外，對於舊版瀏覽器，您需要add Array.forEach in yourself。

Answer 7

下面是使用DOMBuilder這樣做的一個實例，它使用相同的代碼來生成DOM元素和HTML字符串。

• http://jsfiddle.net/insin/hntxW/

代碼：

var dom = DOMBuilder.elementFunctions; 

function arrayToTable(a, cols) { 
    var rows = []; 
    for (var i = 0, l = a.length; i < l; i += cols) { 
     rows.push(a.slice(i, i + cols)); 
    } 
    return dom.TABLE({border: 1, bgcolor: 'gray'}, 
    dom.TBODY(
     dom.TR.map(rows, function(cells) { 
     return dom.TD.map(cells); 
     }) 
    ) 
); 
} 

var data = [1, 2, null, 3, null, 4, null, 5, 6]; 

document.body.appendChild(arrayToTable(data, 3)); 
document.body.appendChild(
    dom.TEXTAREA({cols: 60, rows: 6}, 
    DOMBuilder.withMode("HTML", function() { 
     return ""+arrayToTable(data, 3); 
    }) 
) 
); 

Answer 8

是，你可以從頭開始建立......但有一個更快的方法。向它扔一個網格。網格將採取字符串，數組，JSON輸出等數據，並將其轉換爲適當的HTML輸出表，並允許您通過排序，分頁，過濾等方式擴展它。

我個人最喜歡的是DataTables，但那裏有很多其他人。

一旦你精通，將其中一個字面設置需要5分鐘。保存你的大腦能量來治癒世界飢餓，編碼下一個Facebook，等等......