0

我一直在尝试使用javascript在表格中汇总一个骰子列表（对总和），以避免在我的html页面中硬编码11行并稍后在js文件中单独访问每一行以添加值。因此，我使用循环和 document.writeln() 以更紧凑的方式执行此操作，但输出未显示表格或任何内容。

document.writeln("<table border=\"1\"><thead><tr><th>Sum of Dice</th><th>Total Times   Rolled</th></tr></thead><tbody>");
for (var i=0; i < 11; i++)
{
    document.writeln("<tr><td>2</td><td></td></tr>");
}
document.writeln("</tbody></table>");

行不应该全部以 2 开头，我只使用该数字作为测试，for 循环中的第二个标签是我在数组中已有的总数，但我的问题是显示表格。

4

2 回答 2

0

尝试这个：

<script>
        var code = "";
        function write(){
            code += "<table border=\"1\"><tr><th>Sum of Dice</th><th> Total Times Rolled</th></tr>";
            for (var i = 0; i < 11; i++){
                code += "<tr><td>2</td><td></td></tr>";
            }
            code += "</table>";
            document.body.innerHTML = code;
        }
    </script>

并且不要忘记将这段代码放到 html 中：

<body onload="write()">

在这里你有结果：

在此处输入图像描述

于 2013-03-21T17:01:09.210 回答
0

我认为 writeln 用一大堆 HTML 文本字符串创建表通常不是一个好主意。我建议通过 Javascript 创建 table dom 元素并将其附加到 wrapper 元素。

var headerContent = ['Sum of Dice', 'Total Times Rolled'];
var table = document.createElement('table'),
    header = table.createTHead(),
    row, 
    cell;

table.border = 1;

// construct header
row = header.insertRow(0);
for (var i = 0, len = headerContent.length; i < len; i++) {
    cell = row.insertCell(i);
    cell.innerHTML = headerContent[i];
}

// construct table content
for (var i = 0; i < 11; i++) {
    row = table.insertRow(i + 1);
    for (var j = 0, len = headerContent.length; j < len; j++) {
        cell = row.insertCell(j);
        cell.innerHTML = '2';
    }
}

// add table element to the dom tree
var wrapper = document.getElementById('wrapper');
wrapper.appendChild(table);

见http://jsfiddle.net/LgyuE/

于 2013-03-21T17:33:21.900 回答