-2

テーブルから行を削除したいのですが、Javascript を使用しています。テーブルの行を動的に作成していますが、最後のセルに削除ボタンがあるので、行を削除するにはどうすればよいですか?

var newData4 = document.createElement('td');
                var delButton = document.createElement('input');
                delButton.setAttribute('type', 'button');
                delButton.setAttribute('name', 'deleteButton');
                delButton.setAttribute('value', 'Delete');
                newData4.appendChild(delButton);
                newRow.appendChild(newData4);

これは、テーブルの行を作成するための関数です

    function addItem()
{
    document.getElementById('add').onclick=function()
    {
                var myTable = document.getElementById('tbody');
                var newRow = document.createElement('tr');




            //var element1 = document.createElement("input");
            //element1.type = "checkbox";
            //newRow.appendChild(element1);

            var newData1 = document.createElement('td');
            newData1.innerHTML = document.getElementById('desc').value;

            var newData2 = document.createElement('td');
            newData2.innerHTML = document.getElementById('taskPriority').value;

            var newData3 = document.createElement('td');
            newData3.innerHTML = document.getElementById('taskDue').value;




                    myTable.appendChild(newRow);
                    newRow.appendChild(newData1);
                    newRow.appendChild(newData2);
                    newRow.appendChild(newData3);


                var newData4 = document.createElement('td');
                var delButton = document.createElement('input');
                delButton.setAttribute('type', 'button');
                delButton.setAttribute('name', 'deleteButton');
                delButton.setAttribute('value', 'Delete');
                newData4.appendChild(delButton);
                newRow.appendChild(newData4);
            }
    }
4

3 に答える 3

1 
function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

ここでこのコードを試してください

代わりに試す

//delete the table row
        $(document).on('click', '#del', function(){
              $(this).parents('tr').remove();
            });

        }); //del is the id of the delete block

1 つの純粋な JavaScript アプローチ

function deleteRowUI(btndel) {
    var table=document.getElementById('filterTableBody');
    if (typeof(btndel) == "object") {
        p=btndel.parentNode.parentNode;
        p.parentNode.removeChild(p);
        var oTable = document.getElementById('filterTableBody');

        //gets rows of table
        var rowLength = oTable.rows.length;
        for (var i = 1; i < rowLength; i++){

               var oCells = oTable.rows.item(i).cells;
               //gets cells of current row
               var cellLength = oCells.length-1;
                   for(var j = 0; j < cellLength; j++){
                       oCells.item(j).innerHTML = "";
                       break;
                   }
                   break;
        }
    } else {
        return false;
    }
}
于 2013-10-08T04:35:49.313 に答える
0

jQuery remove メソッドを使用してそれを行います。

id 属性による: $("#id here").remove();

class 属性による: $(".class name here").remove();

少しはお役に立てたかな…

于 2012-10-19T13:14:49.553 に答える
0

一時的に非表示にしたい場合は、次のようにします: this.parentNode.style.display='none'; 除外ボタンは td にあることに注意してください。しかし、本当に html とデータベースから削除したい場合は、上記と同じことを行い、db から削除するために php/plsql の関数を追加で呼び出す必要があります。ajax を使用して呼び出すことをお勧めします。 http://www.w3schools.com/ajax/default.asp

于 2012-10-19T13:09:39.117 に答える