Удалить несколько строк в HTML-таблице с помощью JavaScript?

Question

Удалить несколько строк в HTML-таблице с помощью JavaScript?

0

Я создаю таблицу html с 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="&nbsp;&nbsp;&nbsp;";
    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;&nbsp;&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. пожалуйста, зайдите в firefox и дайте мне ответ. Я буду ждать вашего ответа. Благодарю.

Iren Patel 18 сен. 2013, в 11:08

Источник

Теги:

javascript

html

2 ответа

Ещё вопросы

royse41 · Answer 1 · 2013-09-23T06-54-00.000Z

Проблема вы пытаетесь получить доступ к row1, row2, row3 и т.д. в вашей changeDelete функции, но они были созданы в dummy функции, так что они не существуют в текущей области.

Когда вы вызываете changeDelete, вам придется повторно найти каждую строку таблицы, прежде чем вы сможете получить к ней доступ.

Что-то вроде этого должно начать вас:

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

не работает должным образом любой демонстрационный пример
он не предназначен для работы просто копированием и вставкой - это для начала. может быть, стоит почитать некоторую документацию по jquery - я не делаю вашу работу за вас.

Iren Patel · Answer 2 · 2013-09-29T05-42-00.000Z

Я получаю правильный ответ для удаления всех строк при выборе флажка.

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