2

假设我有这三个空白开头的空格。我想在 JavaScript 中使用 innerHTML 进行更改。

<p id="topname"></p>
<div id="table"></div> 
<p id="botname"></p>

document.getElementById("topname").innerHTML = "Boy"; 
document.getElementById("botname").innerHTML = "Girl";

我设法用 innerHTML 更改了 topname 和 botname。如何更改div id="table"以显示 x by y（2x2、4x4、8x8 等）表？

4

3 回答 3

2

建议不要将 a替换为<div>a <table>，而是将 a 创建<table>为 的子节点。<div>只要您没有向 the 添加其他样式<div>（如填充或边距），这对显示没有影响。

建立几个循环<tr>并将<td>完成这项工作。这是一个接受 x 和 y 的函数：

function makeTable(rows, cols) {
  // Create a table node
  var tbl = document.createElement('table');
  // Make a <tr> for each row
  for (var i=0; i<rows; i++) {
    var tr = document.createElement('tr');
    // And make a <td> for eah col
    for (var j=0; j<cols; j++) {
      var td = document.createElement('td');
      // Append them to the current tr
      tr.appendChild(td);
    }
    // Append the row
    tbl.appendChild(tr);
  }
  return tbl;
}

// Create a new 2x4 table with the function
var newTable =  makeTable(2, 4);
// And append it as a child to the <div id='table'>
document.getElementById('table').appendChild(newTable);

这是在行动

于 2012-11-05T12:25:34.520 回答
0

首先，将您的更改div为table手动：

<table id="table"></table>

使用以下代码，您可以填充table行和列：

document.getElementById("table").appendChild(makeTable(2, 4));

function makeTable(rows, cols) {

    var table = document.createDocumentFragment(), tr = document.createElement("tr"), td = document.createElement("td"), i, j;

    for(j = 0; j < cols; j++) tr.appenChild(td.cloneNode(true));

    for(i = 0; i < rows; i++) table.appendChild(tr.cloneNode(true));

    return table;

}
于 2012-11-05T13:21:12.903 回答
0

您应该能够以相同的方式执行此操作，但是，该 div id 可能会给您带来问题。TABLE 本身就是一个 html 实体。我会重命名它。

document.getElementById("table").innerHTML = "<table><caption>Caption</caption><thead>Table Header</thead><tfoot>Table Footer</tfoot><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>";

以及上面暗影法师所说的。最好使用正确的工具来完成这项工作。我的回答是，如果您坚持在 div 中执行此操作。

于 2012-11-05T12:24:27.327 回答