在这里,我试图通过单击添加按钮来添加html行,并通过单击删除按钮来删除添加的行。
按预期添加行的效果很好。但是问题是删除功能删除了表的最后一行,而不是删除了该行。
由于每行都有删除按钮,因此单击删除按钮时,仅应删除相应的行。
这是jsfiddle,可以更好地说明情况。
如果上面的小提琴无法加载,请参考下面的代码。
提前致谢
JAVSCRIPT
//function to add a row
function insSpec()
{
rl=document.getElementById("insSpecc").rows.length;
var a=document.getElementById("insSpecc").insertRow(rl);
var h=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
h.innerHTML='<div class="separator"><input type="text" name="client_prod[]" class="separator" id="competitor_prod'+rl+'" style="width:150px" >';
f.innerHTML='<input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5" />';
m.innerHTML='<input type="text" name="client_rrx[]" id="client_rrx'+rl+'" size="5" />';
n.innerHTML='<button class="del_img" onClick="delSpec('+rl+')">Delete</button></div>';
}
//function to delete a row
function delSpec(rl)
{
r=document.getElementById("insSpecc").rows.length;
if(r!=2)
{
document.getElementById("insSpecc").deleteRow(r-1)
}
}
的HTML
<table id="insSpecc" width="100%;">
<div class="separator">
<tr>
<td><span>Product</span></td>
<td><span>NRX(Qty)</span></td>
<td><span>RRX(Qty)</span></td></tr></div>
<tr>
<td><input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"></td>
<td>
<input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input">
</td>
<td>
<input type="text" id="client_rrx" name="client_rrx[]" size="5">
</td>
<td>
<button id="add_img" id='insSpecimg' style='display:block;' onClick="insSpec()" align="center">Add</button>
</td>
</tr>
</table>
最佳答案
尝试使用
n.innerHTML='<button class="del_img" onClick="delSpec(this)">Delete</button></div>';
然后
function delSpec(node)
{
r=node.parentNode.parentNode;
r.parentNode.removeChild(r);
}
在这种情况下,delSpec将收到指向按钮的指针,并将能够删除必要的行。
关于javascript - 如何使用Javascript DOM删除动态创建的html行中的特定行?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9030858/