使用jQuery从HTML表中删除(删除)表行

Removing (deleting) a table row from an HTML table using jQuery

本文关键字：删除表行 jQuery HTML 使用更新时间：2023-09-26

我需要你的帮助

我试图有选择地删除表行在按钮的点击，但它似乎不是代码工作，因为它应该，什么都没有发生。

也许一组新的眼睛可能是治疗这个问题!

我是jQuery友好!

所讨论的代码:

$('#remove_row').click(function() {
    var $row = $tbody.find('.highlight')
    $("#data tr").eq($row).remove();
});

这是标记

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css">
.highlight {
    background-color: rgb(255,0,0);
}
</style>
<script type="text/javascript">
window.onload = function() {
var rowCount = $('#data >tbody >tr').length;
$("#maxrows").val(rowCount);
    var $tbody = $("#data tbody").on('click', 'tr', function() {
            highlight($(this));
    });

    $('#goto_first').click(function() {
        var $first = $tbody.find('tr').first();
            highlight($first);
    });
    $('#goto_prev').click(function() {
        var $prev = $tbody.find('.highlight').prev();
            highlight($prev);
    });

    $('#goto_next').click(function() {
        var $next = $tbody.find('.highlight').next();
            highlight($next);
    });
    $('#goto_last').click(function() {
        var $last = $tbody.find('tr').last();
            highlight($last);
    });
    $('#goto_row').click(function() {
        var $row = prompt("Enter row number")
        highlight($("#data tr").eq($row));
    });
    $('#remove_row').click(function() {
        var $row = $tbody.find('.highlight')
        $("#data tr").eq($row).remove();
    });

    function highlight($row) {
            if ($row.length) {
                $tbody.children().removeClass("highlight");
                $row.addClass('highlight');
                $("#rownum").val($row[0].rowIndex);
            }
    }
}
</script>
</head>
<body>
<table id="data" border="1" cellspacing="1" cellpadding="1">
    <thead>
        <tr>
            <th>#</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>4</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>5</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>6</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly><br>
of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">
</body>
</html>

$row已经是您想要删除的行的引用。变化:

$("#data tr").eq($row).remove();

:

$row.remove();

<<p> jsFiddle例子/strong>

将删除功能更改为:

$('#remove_row').click(function() {
    $tbody.find('.highlight').remove();
});