下面的 fiddle 来自另一个问题。它包含使用 javascript 动态添加和删除 html 表行的输出。 fiddle 中的代码给了我想要的东西。但是我的代码有一个问题。在逐行删除时,第一行也被删除。如何仅在第一行隐藏删除按钮?
HTML
<div id="POItablediv">
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>POI</td>
<td>Latitude</td>
<td>Longitude</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
</tr>
</table>
JavaScript
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
console.log( 'hi');
var x=document.getElementById('POITable');
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('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
上面是 fiddle 中的代码。如果您无法加载 fiddle ,希望这会有所帮助。它有时会发生。
最佳答案
这看起来很优雅。
隐藏第一个:
$("table tr:eq(1) td:eq(3) input").css("display","none");
然后显示新创建的tr:
var noRows = $("#POITable tr").length-1;
$("table tr:eq("+noRows+") td:eq(3) input").css("display","block");
fiddle : http://jsfiddle.net/Lh8KL/
关于javascript - 如何避免在使用 DOM 添加和删除 html 表格行时删除第一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8623740/