Question

我有一个.js文件，可以通过以下方式创建一个4x4表：

document.write('<div align="center"><table>');
for (var a = 0; a < 4; a++) {
    document.write('<tr>');
    for (var b = 0; b < 4; b++) {
        document.write('<td align="center" id="t' +((4 * a) + b) + '"></td>');
    }
    document.write('<\/tr>');
}

如果我想在页面加载后向该表添加一列和一行，该怎么办？换句话说，我正在寻找相同的功能，但是＆＃34; 4＆＃34;是一个变量，我从一个复选框中得到它的值。

（我没有将该代码放在正确的函数中，因为每次在函数中调用document.write时，页面都会变为空白。）

也许还有另一种方法可以在没有document.write的函数中使用它，而这正是我所寻找的。

所以我试着连续所有的＆＃39;＆＃39;字符串并将它们应用于表格的.innerHTML，但它没有用。有什么想法吗？我该如何纠正错误？

谢谢。 （请不要jQuery回答......）

Answer 1

您可以使用标准document方法。可以在MDN

上找到文档

CSS

table {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 3px;
}
td {
    width: 25px;
    height: 25px;
    border-style: solid;
    border-width: 1px;
}

的Javascript

var table = document.createElement('table'),
    tHead = document.createElement('thead'),
    tBody = document.createElement('tbody'),
    row,
    cell,
    a,
    b;

table.align = 'center';
table.appendChild(tHead);
table.appendChild(tBody);
for (a = 0; a <= 3; a += 1) {
    row = tBody.insertRow(-1);
    for (b = 0; b <= 3; b += 1) {
        cell = row.insertCell(-1);
        cell.id = (4 * a) + b;
        cell.align = 'center';
        cell.appendChild(document.createTextNode(cell.id));
    }
}

document.body.appendChild(table);

在jsFiddle

上

Answer 2

var main = document.getElementById("table");
document.write('<div align="center" id="table"><table>');
    for (var a = 0; a < 4; a++) {
main.appendChild('<tr>');
    for (var b = 0; b < 4; b++) {
    main.appendChild('<td align="center" id="t' +((4 * a) + b) + '"></td>');
    }
main.appendChild('<\/tr>');
}

我基本上只是为appendChild（）切换document.write。这对你有用吗？

如何在不使用document.write的情况下更改网页内容？

2 个答案: