Question

我有一个带有插入和删除行功能的HTML表，它的工作非常完美。但删除功能适用于复选框+删除按钮。

当我想删除一行时，首先我选中了复选框，然后按删除按钮。我想直接使用删除按钮。以下是我的代码，

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>

注意：Atleast 1行应该在那里（不能删除所有行）

Answer 1

如果要使用一个按钮，可用的解决方案是选择/取消选择要删除的行。这样也支持多选和删除。例如，

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

编辑 - 对评论的回复

如果您想为每一行设置一个删除按钮并使用它，您可以执行以下操作，

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

此代码是一个示例：

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

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

使用javascript删除表格行

2 个答案: