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」)を削除するにはどうすればよいですか?

2つの方法で削除しようとしましたが、

  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 に答える
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 に答える