javascriptを使用してテーブル内に行を生成

Question

ボタンをクリックすると、新しい行をテーブルに挿入するためにJavaScriptを使用しようとしています。これは私が使用しているテーブルです。

<table id="POITable" style="width: 120%; border: 4px solid #ddd;"> 
    <tr> 
     <td style="width:10%;">Hito</td> 
     <td style="width:55%;">Descripcion</td> 
     <td style="width:20%;">Tiempo</td> 
     <td style="width:15%;">Accion</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td ><input type="text" id="latbox" name="latbox[]" style="width:100%;"/></td> 
     <td><select name="lngbox[]" id="lngbox" onchange=suma(this.form)> 
      <option value="0">Seleccione tiempo</option> 
      <option value="7">1 Semana</option> 
      <option value="14">2 Semanas</option> 
      <option value="30">1 Mes</option> 
      </select> 
      </td> 

     <td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow(this)" style="height:25px; width:25px"/></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td><input type="text" id="latbox" name="latbox[]" style="width:100%;"/></td> 
     <td><select name="lngbox[]" id="lngbox" onchange=suma(this.form)> 
      <option value="0">Seleccione tiempo</option> 
      <option value="7">1 Semana</option> 
      <option value="14">2 Semanas</option> 
      <option value="30">1 Mes</option> 
      </select></td> 
     <td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow(this)" style="height:25px; width:25px"/> 
     <input type="button" id="delPOIbutton" value="-" onclick="deleteRow(this)" style="height:25px; width:25px"/></td> 
    </tr>           

私は「新しい行を作成するJavaScript関数を呼び出すと、私はボタンをクリックしている行の前に挿入」をクリックします。

これは、スクリプト変数に

function insRow(row) 
{ 

    var x=document.getElementById('POITable'); 
    var i=row.parentNode.parentNode.rowIndex; 
    var new_row = x.rows[2].cloneNode(true); 
    var len = x.rows.length; 
    new_row.cells[0].innerHTML = len; 

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = new_row.cells[2].getElementsByTagName('select')[0]; 
    inp2.id += len; 
    inp2.value = ''; 
    //alert(i); 
    //x.appendChild(new_row); 
    x.insertBefore(new_row, x.childNodes[i]); 

} 

</SCRIPT> 

である「i」は私が前に新しい行を挿入するつもりれている行のインデックスを取得します。 私は問題はありませんが、新しい行のjavascriptコード（i> 2）によって生成されますが、行1または2（htmlで作成された静的なもの）への参照を作成しようとすると、コードは新しい行をそれらの間ではなくすべての行の前に置きます。 私は問題は、JavaScriptが2番目のインデックスを移動できないことだと思います。

誰かがそれの前に他の行を置くために2番目の行を1つのスペースに移動する方法を知っていますか？

ありがとうございました。

Answer 1

あなたのコードでいくつかの間違いをしました。以前の行はtbodyの外側に追加されました。また、insertBeforeは2番目の引数がiであるiが間違っていました。下のコードで正しい行要素でなければなりません。

function insRow(row){ 
var x=document.getElementById('POITable').getElementsByTagName('tbody')[0]; 
var i=row.parentNode.parentNode.rowIndex; 
var new_row = x.rows[2].cloneNode(true); 
var len = x.rows.length; 
new_row.cells[0].innerHTML = len; 

var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
inp1.id += len; 
inp1.value = ''; 
var inp2 = new_row.cells[2].getElementsByTagName('select')[0]; 
inp2.id += len; 
inp2.value = ''; 
//alert(i); 
//x.appendChild(new_row); 
console.log(i); 
x.insertBefore(new_row, row.parentNode.parentNode); 

}