insertRow() не работает с циклом FOR

Я пытаюсь написать код JavaScript для добавления нескольких строк в соответствии с числом, представленным во входном текстовом поле. Я пытаюсь сделать это, используя цикл FOR, но по какой-то причине он не работает. Можете ли вы объяснить мне, почему он не вставляет столько строк, сколько значение из входного текстового поля ??? Вот мой код:insertRow() не работает с циклом 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>

источник

2015-10-12 ann.onimus07

Где вы определения '' table' и newTR'? – Dom

'var tableId = document.getElementById (" table ");' должно быть 'var table = document.getElementById (" table ");' –

Точно верно. Он путал 'tableid' с' table'. Вот как я ответил на этот вопрос –

Этот вопрос с 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/

источник

2015-10-12 16:34:56

'insertCell()' - это метод JavaScript. См. Здесь http://www.w3schools.com/jsref/met_tablerow_insertcell.asp –

Проблема заключается в том, независимо от количества строк, клетки должны начинаться с 0,1,2 и так далее, не происходит в вашем коде. Для итерации 0-й код работает отлично, но позже, клетки не начинаются с 0. Таким образом, проблема

Fix: Так как вы планируете иметь только две ячейки для каждой строки, сделать это следующим образом:

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>

источник

2015-10-12 16:39:43

@RichardHamilton: Да .. Я хотел добавить '/>'. Исправлено –

Большое спасибо, ** Sandeep Nayak **, за ваш быстрый ответ и решение моей проблемы. –

Есть несколько проблем с этим ответом. Во-первых, он не показывает строки таблицы, которые уже существуют. Два, HTML начинает отсчет в 0, когда я думаю, что он должен начинаться с 1. Вы должны использовать что-то вроде 'newTD1.innerHTML =" Row "+ (i + 1) +" Cell "+ (j + 1);' –

insertRow() не работает с циклом FOR

ответ

Смежные вопросы