需要帮助瓦特/ 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，等等......