使用javascript删除表格行

Question

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)

Answer 1

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

Answer 2

This code is an example:

    $(document).on('click', 'img.imgdel', function deleteRow() {
      $(this).closest('tr').remove();
      return false;
   });

https://codepen.io/dionejpmc/pen/vYxLdyX