-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

一种纯 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

if you want to temporary hidden it you can do: this.parentNode.style.display='none'; in mind that the exclusion button is in a td. But if you want to really delete it from the html and the database: you need to make the same as above and a extra call to a function of php/plsqlwathever to delete from de db, i recommend using ajax to call it. http://www.w3schools.com/ajax/default.asp

于 2012-10-19T13:09:39.117 回答
0

使用 jQuery remove 方法来做到这一点。

通过 id 属性： $("#id here").remove();

通过类属性： $(".class name here").remove();

我希望我有一点帮助...

于 2012-10-19T13:14:49.553 回答