1

HTML： 

<body style='background-color: white;'>

<div>
    <div id='dependent'>
        <input type="button" value="Add" id='abtn' onclick='addfunction()' />
        <input type="button" value="Delete" id='dbtn' onclick='deletefunction(this)' />
        <input type="button" value="Total No. of rows" id='Button2' onclick='total()'/>      <br />

    </div>
    <div>
        <input type="button" value="Submit" id='subid' onclick='smt()' /></div>
</div>

Javascript：

 <script type="text/javascript">




    function addfunction() {

        rcount++;
        t++;

        tr1 = document.createElement('tr');
        tr1.id = "t" + t;

        tx1 = document.createElement('p');
        text1 = document.createTextNode(t);
        tx1.appendChild(text1);

        td1 = document.createElement('td');
        td1.id = "da" + t;

        c1 = document.createElement('input');
        c1.type = "checkbox";
        c1.id = "a" + t;

        td2 = document.createElement('td');
        td2.id = "db" + t;
        c2 = document.createElement('input');
        c2.type = "checkbox";
        c2.id = "b" + t;

        td3 = document.createElement('td');
        td3.id = "dc" + t;
        c3 = document.createElement('input');
        c3.type = "checkbox";
        c3.id = "c" + t;


        dl1 = document.createElement('input');
        dl1.type = "button";
        dl1.id = "dl" + t;
        dl1.onclick = deletefunction; //Delete button for each row

        br1 = document.createElement('br');

        document.getElementById("dependent").appendChild(tr1);
        document.getElementById(tr1.id).appendChild(tx1);
        document.getElementById(tr1.id).appendChild(td1);
        document.getElementById(td1.id).appendChild(c1);
        document.getElementById(tr1.id).appendChild(td2);
        document.getElementById(td2.id).appendChild(c2);
        document.getElementById(tr1.id).appendChild(td3);
        document.getElementById(td3.id).appendChild(c3);
        document.getElementById(tr1.id).appendChild(dl1);
        document.getElementById(tr1.id).appendChild(br1);



//Delete Function
    function deletefunction() {
        alert('tr' + rcount);
        document.getElementById('tr' + rcount).removeNode(true);

    }




</script>
</body>
</html>

如何使用 javascript 删除动态创建的行（或“tr”）？

我尝试通过两种方式删除它，

  1. 单独的删除按钮将删除最后一行。
  2. 每行上的删除按钮，用于删除该特定行。

我尝试了各种方法，但都没有奏效，我遇到了错误" Unable to get value of the property 'removeNode': object is null or undefined".

4

3 回答 3

2

尝试这样的事情：

var row = document.getElementById('tr' + rcount);
row.parentElement.removeChild(row);

看起来你没有正确形成id。tr您已经像这样创建了它：

tr1.id = "t" + t;

然后尝试阅读：

document.getElementById('tr' + rcount)

似乎rcount也不是你所期望的。它是一个全局变量，addfunction()上次执行时具有相同的值。

于 2013-06-11T07:21:45.000 回答
2

试试这个

var parNode=document.getElementById("dependent");
parNode.removeChild(parNode.childNodes[rowCount]);

只需提供 rowCount

于 2013-06-11T07:30:37.893 回答
1

对于这种情况，@Teemu 答案几乎没有添加：每行上的删除按钮，以删除该特定行。-> 单个按钮。由于 rcount 没有返回所需的值...要删除多行，也许应该添加额外的复选框...

因此，这仅在您单击每行中的删除按钮时才有效。

      function deletefunction() {


     id= $(this).attr('id');

    fin = id.replace(/\D+/, '');





    var row = document.getElementById('tr' + fin);
row.parentElement.removeChild(row);



    }

此外，脚本不会返回正确的行数......它也会计算已删除的行......

于 2013-06-11T08:16:46.170 回答