Question

一段时间以来，我一直在试图找出该错误，但我无法在网上找到有关此错误的任何信息。

我希望发生的事情：

当按下创建行按钮时，将在表格底部创建一个新行。该行有三个单元格。第一个是索引，第二个是“ New 1”，第三个是“ New 2”。

正在发生的事情：

我不想发生的是新行中的第一个单元格显示为空。检查它表明它实际上没有内容。将字符串保存到变量，然后将其添加到单元格的内部html中也不起作用。但是，如果我将该变量记录到控制台，它将打印正确的索引。

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var test = table.rows.length.toString()
  cell2.innerHTML = test.toString()
  console.log(test)
  cell2.innerHTML = " NEW 1 ";
  cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length - 1);
}

table,
td {
  border: 1px solid black;
}

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

我确定我做错了一些我没发现的错误。如果有人可以帮助阐明我的问题，那就太好了。预先谢谢你。

Answer 1

cell1.innerHTML = test;     
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";

就这么简单

Answer 2

您没有将任何值设置为cell1。

实际上，您的问题是您正在将索引插入cell2中而不是cell1中，因此cell1始终为空。

只需更改此行：

cell2.innerHTML = test.toString();

收件人：

cell1.innerHTML = test;

演示：

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var test = table.rows.length.toString()
    cell1.innerHTML = test;
    console.log(test)
    cell2.innerHTML = " NEW 1 ";
    cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}

table, td {
    border: 1px solid black;
}

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

Answer 3

您永远不会设置第一个插入的单元格的innerHTML。您必须忘记设置第一个单元格的innerHTML，而是两次设置第二个单元格的innerHTML。

更改

cell2.innerHTML = test.toString()

收件人

cell1.innerHTML = test;//you do not need to invoke toString() on a String

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

<script>
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var test = table.rows.length.toString()
    cell1.innerHTML = test;
    console.log(test)
    cell2.innerHTML = " NEW 1 ";
    cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}
</script>

</body>
</html>

表长度属性转换为字符串不会返回任何内容

3 个答案: