Question

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

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

Answer 2

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

Answer 3

使用jQuery remove方法来完成它。

通过id属性： $（＆＃34; #id here＆＃34;）。remove（）;

通过class属性： $（＆＃34; .class name here＆＃34;）。remove（）;

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

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

3 个答案: