Question

假设我有这三个空格开头是空白的。我想在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等）表？

Answer 1

建议<div>作为<table> As的子节点，而不是用<table>替换 <div>。只要您没有为<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);

Here it is in action

Answer 2

你应该能够以同样的方式做到这一点，但是，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>";

Shadow Wizard上面说的是什么。最好使用正确的工具来完成工作。我的回答完全在于你坚持在div中做到这一点。

Answer 3

首先，手动将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;

}

用表更改div空间

3 个答案:

Here it is in action