附加表以及更改ID

时间:2014-04-26 11:31:46

标签: javascript jquery html

我在其单元格上附加一个包含select和input元素的表,因为id的值正在改变,但仅适用于单元格中的单个元素。

我的Javascript

 function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}


 function insRow()
{
console.log( 'hi');
var x=document.getElementById('addTable');
var new_row = x.rows[1].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 = '';
var inp3 = new_row.cells[2].getElementsByTagName('select')[0];
inp3.id += len;
inp3.value = '';
var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = '';
x.appendChild( new_row );
}

HTML

<div id="POItablediv">
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
<table id="addTable" border="1">
    <tr>
        <th>POI</t>
        <td>Latitude</td>
        <td>timezone</td>
        <td>zzz</td>
        <td>Delete?</td>
        <td>Add Rows?</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input size=25 type="text" id="latbox"/></td>
        <td><select id="selectbox"><option value='am'>AM</option>
                                        <option value='pm'>PM</option> </select>
            <select id="gmtbox"><option value='gmt+'>gmt+</option>
                                        <option value='gmt-'>gmt-</option> </select>
                                    </td>
        <td><input size=25 type="text" id="zzz"></td>

    </tr>
</table>
</body>

我没有使用id latbox和zzz的问题,因为它们是其单元格中的唯一元素,但对于selectbox和gmt,似乎只有selectbox id是每次我追加时都会更改但不是gmtbox。我如何更改gmtbox?

1 个答案:

答案 0 :(得分:1)

因为你得到了

的相同元素
var inp2 = new_row.cells[2].getElementsByTagName('select')[0];

var inp3 = new_row.cells[2].getElementsByTagName('select')[0];

第二个需要

var inp3 = new_row.cells[2].getElementsByTagName('select')[1];