Question

我正在尝试编写一个JavaScript代码，根据输入文本框中提交的数字添加多行。我试图通过使用FOR循环来做到这一点但由于某种原因它不起作用。你能解释一下为什么它不插入与输入文本框中的值一样多的行???这是我的代码：

<!DOCTYPE html>  
<html>
<head>
    <br><meta charset=utf-8 />
    <title>Insert rows in a Table</title>  
</head>
<body>  
    <table id="table" border="1">  
        <tr>
            <td>Row1 cell1</td>  
            <td>Row1 cell2</td>
        </tr>  
        <tr>
            <td>Row2 cell1</td>  
            <td>Row2 cell2</td>
        </tr>  
    </table><br>  
    <form>
        Type in a number:<input id="input" type="text" value=""}>
        <input type="button" onclick="insert_Row()" value="add row(s)">
    </form><br/>
    <p id="p"></p>

    <script>

        var tableId = document.getElementById("table");

        function insert_Row(){
            var input = document.getElementById("input").value;
            var number = Number(input);

            for(i=0;i<number;i++){
                var ii = i+1;
                var newTR = table.insertRow(i);
                var newTD1 = newTR.insertCell(i);
                var newTD2 = newTR.insertCell(ii);
                newTD1.innerHTML = "Row " + i + " Cell "+ i;
                newTD2.innerHTML = "Row " + i + " Cell "+ ii;
            };
        };
    </script>
</body>
</html>

Answer 1

问题在于您的document.getElementById声明。

此外，听起来您想要在表的末尾插入行。在这种情况下，您的代码将如下所示。

var table = document.getElementById("table");
var numRows = document.querySelectorAll("tr").length;

function insert_Row(){
    var input = document.getElementById("myInput").value;
    var number = Number(input);

    for (var i = numRows; i < number; i++) {
        var ii = 0;
        var ij = 1;
        var newTR = table.insertRow(i);
        var newTD1 = newTR.insertCell(ii);
        var newTD2 = newTR.insertCell(ij);
        newTD1.innerHTML = "Row " + (i + 1) + " Cell "+ (ii +1);
        newTD2.innerHTML = "Row " + (i + 1) + " Cell "+ (ij + 1);
    };
};

要使用document.getElementById，您需要像输入标记一样添加id属性。

<input id="myInput" type="button" onclick="insert_Row()" value="add row(s)">

这是更新的小提琴

http://jsfiddle.net/vgwk00zm/2/

Answer 2

问题与行号无关，单元格应从0,1,2等开始，这在代码中不会发生。对于第0次迭代，您的代码工作正常，但稍后，单元格不会从0开始。因此问题

修复：由于您计划每行只有2个单元格，因此请执行以下操作：

＆＃13;

var tableId = document.getElementById("table");

  function insert_Row() {
    var input = document.getElementById("input").value;
    var number = Number(input);
    for (i = 0; i < number; i++) {
      var j = 0; // First Cell
      var k = 1; // Second Cell
      var newTR = table.insertRow(i);
      var newTD1 = newTR.insertCell(j);

      newTD1.innerHTML = "Row " + i + " Cell " + j;
      var newTD2 = newTR.insertCell(k);
      newTD2.innerHTML = "Row " + i + " Cell " + k;
    };
  };

＆＃13;

<table id="table" border="1">

</table>
<br>
<form>
  Type in a number:
  <input id="input" type="text" value=""/>
  <input type="button" onclick="insert_Row()" value="add row(s)">
</form>
<br/>
<p id="p"></p>

＆＃13;

insertRow（）不使用FOR循环

2 个答案: