使用jQuery移至第N个表格行

Jason Kelly 发表于 Dev

杰森·凯利

我需要你的帮助。

如何单击按钮，移至表格的下一行。概念是，一旦通过鼠标单击在表主体中选择了一个表行，该表行便会更改背景色并记录一个行号。我想使用给定的行号移动到下一个表格行，并且基本上就像单击鼠标一样单击鼠标“单击它”。

为了使事情尽可能简单，我想使用jQuery。

这是HTML：

<!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 row

    $("#data tbody tr").click(function() {

        var selected = $(this).hasClass("highlight");

        $("#data tr").removeClass("highlight");

        if (!selected) { $(this).addClass("highlight"); }

        row = $(this).closest("tr")[0].rowIndex

        $("#rownum").val(row)


    });



}
</script>

</head>

<body>

<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</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>

<input type="button" id="goto_next" value="next">


</body>

</html>

dfsq

我将突出显示功能提取到单独的功能中，并从两个单击处理程序中使用它：

var $tbody = $("#data tbody").on('click', 'tr', function() {
    highlight($(this));
});

$('#goto_next').click(function() {
    var $next = $tbody.find('.highlight').next();
    highlight($next);
});

function highlight($row) {
    if ($row.length) {
        $tbody.children().removeClass("highlight");
        $row.addClass('highlight');
        $("#rownum").val($row[0].rowIndex);
    }
}