insertRow()不能用于FOR循环

insertRow() not working with FOR loop

本文关键字：FOR 循环 用于 不能 insertRow      更新时间：2023-09-26

我正试图编写一个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>

这个问题与行号无关，单元格应该从0、1、2等开始，这在您的代码中没有发生。对于第0次迭代，您的代码工作得很好，但是之后，单元格不是从0开始的。因此出现了

这个问题

修复:由于您计划每行只有2个单元格，所以这样做:

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;
    };
  };
<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>

问题在于您的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/

相关文章：