删除你点击的行（Javascript动态表）答案

【问题标题】：Delete the row you click on (Javascript dynamic table)删除你点击的行（Javascript动态表）
【发布时间】：2012-10-10 02:32:42
【问题描述】：

我想从表中删除一行，我正在使用 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);
            }
    }

【问题讨论】：

你试过什么？当你说删除时，你的意思是你想从 DOM 中删除元素或进行 ajax 调用以从某个数据库中删除行的数据？
@MateuszKowalik：你能展示你所做的示例代码吗？
我正在为表格中的每一行创建删除按钮，现在我必须让每个按钮在单击时删除自己的行

标签： javascript html html-table row

【解决方案1】：

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

试试这个代码here is fiddle

或者试试

//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;
    }
}

【讨论】：

【解决方案2】：

使用 jQuery remove 方法来做。

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

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

希望我能帮上点忙……

【讨论】：

这是我的大学项目，我们没有接触或 jquery 以及除了 javascript 以外的任何东西
@Mateusz Kowalik 访问viralpatel.net/blogs/…

【解决方案3】：

如果你想暂时隐藏它，你可以这样做： this.parentNode.style.display='none'; 请记住，排除按钮位于 td. 但是如果你想真正从 html 和数据库中删除它：您需要进行与上述相同的操作，并额外调用 php/plsqlwathever 的函数以从 de db 中删除，我建议使用 ajax 来调用它。 http://www.w3schools.com/ajax/default.asp

【讨论】：