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>

当我点击＆＃34;＆＃34;调用一个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>

在变量＆＃34; i＆＃34;我得到了我之前要插入新行的行的索引。索引它是javascript代码（i＆gt; 2）生成的新行，但是当我尝试使用引用第1行或第2行的索引（那些是静态的，在html），代码将新行放在所有行之前而不是它们之间。我认为问题在于javascript无法移动第二个索引。

有人知道如何将第二行移动一个空格以放置其他行吗？

感谢。

Answer 1

你在代码中犯了一些错误，前面的行添加了tbody，insertBefore也不正确，第二个参数是i，这是行号。它应该是下面代码中正确的row元素。

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

}

使用javascript

1 个答案: