Question

<script>
    function myFunction() {
        var table = document.getElementById("traTable");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell2.innerHTML = "<td><input type="/text/"size="/30/"/></td>";
</script>

我有以下代码，当用户单击触发该脚本的按钮时，我想做的是。我想向表中添加一个新单元格。但是，我需要添加为输入文本框类型的单元格。在这里使用innerHTML是正确的选择吗？

Answer 1

您无需在<td>中指定cell2.innerHTML标签，只需执行以下操作：

cell2.innerHTML = "<input type='text' size='30'/>"

function myFunction() {
    var table = document.getElementById("traTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<input type='text' size='30'/>";
}

<table id="traTable" border='1'>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">Try it</button>

Answer 2

您在这里所做的就是将td（包含文本框）添加到td。

因此，代码的结果（假定为空表）将是：

<table id="traTable">
  <tr>
    <td></td>
    <td>
      <td>
        <input type="text" size="30"/>
      </td>
    </td>
  </tr>
</table>

由于嵌套的<td>而明显无效。

使用innerHTML显然没有什么错，但是您必须正确设置该值。 innerHTML会覆盖元素的内部，而不是元素本身。

cell2.innerHTML = '<input type="text" size="30"/>';

将为您提供所需的结果（N.B。我还简化了您的代码以提高可读性）。

演示：

function myFunction() {
  var table = document.getElementById("traTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  cell2.innerHTML = '<input type="text" size="30"/></td>';
}

myFunction();
console.log(document.getElementById("traTable").outerHTML);

table td { border: 1px solid blue; padding:5px; }

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

如何通过javascript设置新添加的单元格的html属性

2 个答案: