Question

32

Delete Table row using javascript

rated 0 times [ 38] [ 6] / answers: 1 / hits: 27064 / 11 Years ago, sun, december 1, 2013, 12:00:00

I have an HTML table with insert and delete row functionality and its working perfectly. But delete functionality works with checkbox + delete button.

When i want to delete a row, first i checked the checkbox and then press delete button. I want to make it directly with delete button. Below is my code,

function deleteRow(tableID)

{

try

     {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++)

            {

            var row = table.rows[i];

            var chkbox = row.cells[0].childNodes[0];

            if (null != chkbox && true == chkbox.checked)

                {

                if (rowCount <= 1)

                    {

                    alert(Cannot delete all the rows.);

                    break;

                    }

                table.deleteRow(i);

                rowCount--;

                i--;

                }

            }

        } catch(e)

            {

            alert(e);

    }

   getValues();

}



<a onclick=deleteRow('dataTable')>Delete Row</a>



<table id=dataTable>

  <tr>

    <td><input type=checkbox name=chk/></td>

    <td><input type=text name=Name></td>

  </tr>

</table>

Note : Atleast 1 row should be there (Cannot delete all the rows)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

donovanjasek

Add To Favorites

Follow

Total Points: 465

Total Questions: 103

Total Answers: 113

Location: Saint Vincent and the Grenadines

Member since Thu, Oct 15, 2020

4 Years ago

answered 11 Years ago daquanmilesw · Accepted Answer

If you want to use one button, a usable solution is to select/unselect the rows to be deleted onclick. This way multi select and delete is also supported. For example,

http://jsfiddle.net/Nt4wZ/

js

function selectRow(row) {

    if (row.className.indexOf(selected) != -1) {

        row.className = row.className.replace(selected, );

    } else {

        row.className +=  selected;

    }

}



function deleteRow(tableID) {

    try {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;

        for (var i = 0; i < rowCount; i++) {

            var row = table.rows[i];

            /*var chkbox = row.cells[0].childNodes[0];*/

            /*if (null != chkbox && true == chkbox.checked)*/



            if (row.getElementsByTagName(input)[0].className.indexOf(selected)!=-1) {

                if (rowCount <= 1) {

                    alert(Cannot delete all the rows.);

                    break;

                }

                table.deleteRow(i);

                rowCount--;

                i--;

            }

        }

    } catch (e) {

        alert(e);

    }

    //getValues();

}

html

<a onclick=deleteRow('dataTable')>Delete Row</a>



<table id=dataTable>

    <tr>

        <!-- <td><input type=checkbox name=chk/></td> -->

        <td>

            <input type=text name=Name onclick=selectRow(this) />

        </td>

    </tr>

    <tr>

        <!-- <td><input type=checkbox name=chk/></td> -->

        <td>

            <input type=text name=Name onclick=selectRow(this) />

        </td>

    </tr>

</table>

css

input.selected {

    border-color:lightgreen;

}

EDIT - response to comments

If you want to have a delete button for each row and use that instead, you can do something like the following,

http://jsfiddle.net/GRgMb/

html

<table id=dataTable>

    <tr>

        <!-- <td><input type=checkbox name=chk/></td> -->

        <td>

            <input type=text name=Name /><input type=button value=delete onclick=deleteRow('dataTable',this) />

        </td>

    </tr>

    <tr>

        <!-- <td><input type=checkbox name=chk/></td> -->

        <td>

            <input type=text name=Name /><input type=button value=delete onclick=deleteRow('dataTable',this) />

        </td>

    </tr>

</table>

js

function deleteRow(tableID,currentRow) {

    try {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;

        for (var i = 0; i < rowCount; i++) {

            var row = table.rows[i];

            /*var chkbox = row.cells[0].childNodes[0];*/

            /*if (null != chkbox && true == chkbox.checked)*/



            if (row==currentRow.parentNode.parentNode) {

                if (rowCount <= 1) {

                    alert(Cannot delete all the rows.);

                    break;

                }

                table.deleteRow(i);

                rowCount--;

                i--;

            }

        }

    } catch (e) {

        alert(e);

    }

    //getValues();

}