Question

需要 JavaScript 帮助以及从数组创建 html 表

2011-04-26

869

javascript html

我尝试了通过谷歌找到的所有方法，但都无法正常工作。输出只是一行，其中列出了数组的所有内容。我需要的是一种写入数组内容的方法，但在 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

您需要打印表格内的 tr （并添加 </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 2

与其尝试写出 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

要决定何时开始新行，只需对 i 使用模数运算符 ( % msdn mdc )：

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”在那里。毕竟这是你的家庭作业。:-)

此外，对于较旧的浏览器，您需要自己添加 Array.forEach 。

Answer 3

我更喜欢使用数组而不是连接

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);