javascript - 用javascript删除html表中的多行？

Question

我用rowspan和colspan创建了html表。我的问题是当复选框选中该行删除时，我删除了四个不同的行。

代码

<div>
<center>
<input type="button" onclick="dummy()" value="Append Row"/>
<input type='button' value='Delete' onclick="changeDelete()"/>
</center><br>
<table border="1px" style="width:800px" align="center" id="dataTable" >

</table>
</div>

JavaScript 代码

i=1;
function dummy(checkValue)
 {
    var table=document.getElementById("dataTable");
    var row1=table.insertRow();
    var row2=table.insertRow();
    var row3=table.insertRow();
    var row4=table.insertRow();


    var cell1=row1.insertCell(0);
    var element1 = document.createElement("input");
    cell1.rowSpan="4",'size','width="100px"';
    cell1.innerHTML="";
    cell1.innerHTML="   ";
    cell1.align="center";
    element1.type = "checkbox";

    element1.name="chkbox";
    element1.id="id_checkbox";
    cell1.innerHTML=i++;
    cell1.appendChild(element1);

    var cell1=row2.insertCell(0);
    cell1.innerHTML="Name:  &nbsp";
    var el = document.createElement('select');
    var opt = document.createElement('option');

    el.setAttribute('name', 'txtRow');
    el.setAttribute('size', 'width="100px"');
    cell1.appendChild(el);


    var label = document.createTextNode('---Select---');
    opt.setAttribute('value', 'item1value');
    opt.appendChild(label);
    //opt.onchange=itemChange(this);
    el.appendChild(opt);
    cell1.appendChild(el);

    var cell3=row2.insertCell(1);
    cell3.innerHTML="Days:";
    cell3.rowSpan="2";

    var cell1=row3.insertCell(0);
    cell1.innerHTML="Generic:;

    var cell2=row2.insertCell(1);
    cell2.innerHTML="Dose:";
    cell2.rowSpan="2";

    var cell1=row4.insertCell(0);
    cell1.innerHTML="Info:;
    cell1.colSpan="2";

    var cell2 = row4.insertCell(1)
    cell2.innerHTML = "DosageInfo";
    cell2.colSpan = "2";

    var cell4=row2.insertCell(3);
    cell4.rowSpan="2";
    cell4.innerHTML="Qty:";

}
function changeDelete(chackValue)
        {
            var a=confirm("Are you sure want to Remove.");
            if (a==true)
            {
                var row1 = $(chackValue).closest('tr');
                var row2= $(row1).next();
                var row3= $(row2).next();           
                var row4= $(row3).next();
                row1.remove();
                row2.remove();
                row3.remove();
                row4.remove();
            }
            else
            {
                $(chackValue).prop('checked', false);
            }               
        }

像这样。这是火狐的输出。请检查Firefox并给我答案。我会等待你的答复。谢谢。

Answer 1

问题是您试图在您的函数中访问row1,row2等，但它们已在您的函数中创建，因此它们不存在于当前范围内。row3changeDeletedummy

当您调用 changeDelete 时，您必须重新找到每个表行才能访问它。

这样的事情应该让你开始：

function changeDelete () {
    if (confirm('Are you sure?')) {
        $('table > tr').each(function () {
            $(this).remove();
        });
    }
}

Answer 2

选中复选框时，我得到删除所有行的正确答案。

function changeDelete(chackValue){
        var r=confirm("Are you sure want to Remove.");
        if (r==true){
            var row = $(chackValue).closest('tr');
            $(row).next().remove();
            $(row).next().remove();
            $(row).next().remove();
            $(row).next().remove();
            row.remove();

        }else{
          $(chackValue).prop('checked', false);
        }               
    }