javascript - 按钮未在预期位置呈现

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

I am expecting the output to look like this

您引用的结构无效。您不能将 button 作为 tr 的直接子项。来自 the spec for tr , tr 元素中唯一可以包含的是 td、th 或脚本支持元素。

However for some reason the button does not render on the first row:

因为您只创建了一个 button 元素，然后将它附加到两个单独的行。添加它并不会克隆它，它将它从它的旧父级(如果有的话)移动到一个新的。

修复它:

1. 每次您想要一个新按钮时创建一个新的按钮(使用新的id；id 值必须在文档中是唯一的)。

2. 将 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"])
);