在这里,我试图通过单击添加按钮来添加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/

10-12 12:59
查看更多