javascript - 使用javascript删除表格行

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>

注意:至少要有 1 行(不能删除所有行)

Answer 1

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

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