Question

我点击HTML中的一个按钮，期望根据for循环创建一个包含X行数的表，然后在每行的末尾创建一个按钮。

我希望输出看起来像这样：

<table>
 <tr>
  <td> first element </td>
  <button> </button>
 </tr>
 <tr>
  <td> first element </td>
  <button> </button>
 </tr>
</table>

但由于某种原因，按钮不会在第一行呈现：

  <table>
     <tr>
      <td> first element </td>
     </tr>
     <tr>
      <td> first element </td>
      <button> </button>
     </tr>
    </table>

这是我正在使用的代码：

function makeHTMLMatchesTable(array){
  var table = document.createElement('table');
  var button = document.createElement('button');
  button.setAttribute("id", "unMatchButton");
  console.log(array.length, 'ARRAY');
    for (var i = 0; i < array.length; i++) {
      console.log(array[i], 'ai');
      var row = document.createElement('tr');
      var cell = document.createElement('td');
      cell.textContent = array[i];
      row.appendChild(cell);
      row.appendChild(button);
      table.appendChild(row);
    }
    return table;
}

Answer 1

我希望输出看起来像这样

您引用的结构无效。您不能button作为tr的直接子女。从the spec for tr开始，tr元素中唯一可以包含td，th或支持脚本的元素。

但由于某种原因，按钮不会在第一行呈现：

因为您只创建了一个 button元素，然后将其附加到两个单独的行中。附加它不会克隆它，它将它从旧的父节点（如果有的话）移动到新节点。

修复它：

每次需要新按钮时都会创建一个新的button（id; id值必须在文档中是唯一的）。

将button附加到td，而不是tr。

示例：

function makeHTMLMatchesTable(array) { var table = document.createElement('table'); for (var i = 0; i < array.length; i++) { var row = document.createElement('tr'); var cell = document.createElement('td'); cell.textContent = array[i]; row.appendChild(cell); cell = document.createElement('td'); // Second td var button = document.createElement('button'); // New button for each button.setAttribute("id", "unMatchButton" + i); // Unique id cell.appendChild(button); // Button in cell row.appendChild(cell); // Add second cell table.appendChild(row); } return table; } document.body.appendChild( makeHTMLMatchesTable(["one", "two", "three"]) );

Answer 2

您需要为每一行创建一个新按钮

function makeHTMLMatchesTable(array){
  var table = document.createElement('table');
  console.log(array.length, 'ARRAY');
  for (var i = 0; i < array.length; i++) {
    console.log(array[i], 'ai');
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.textContent = array[i];
    var button = document.createElement('button');
    button.setAttribute("id", "unMatchButton");
    row.appendChild(cell);
    row.appendChild(button);
    table.appendChild(row);
 }

return table;

}

按钮未呈现预期的位置

2 个答案: