Question

我需要你的帮助。

如何点击按钮，移动到表格中的下一行。这个概念就是这样，一旦通过鼠标点击选择了表格中的表格行，表格行就会改变背景颜色并记录行号。我想使用给定的行号移动到下一个表行，并且只需单击一个按钮，就像使用鼠标一样“点击它”。

为了让事情尽可能简单，我想使用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>

Answer 1

http://jsfiddle.net/yktqf/

$("#goto_next").on("click", function(event) {
    var $table = $("#data"),
        $selectedRow = $("tbody tr.highlight", $table);
    $selectedRow.insertAfter($selectedRow.next()).removeClass("highlight").click();

});

Answer 2

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

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

演示：http://jsfiddle.net/wygRe/

Answer 3

另一个选项，将TR单击处理程序拉入单独的函数，并添加另一个附加到goto_next按钮上的click事件的函数。从那里拉出文本元素中当前选定的行值，将其递增并将其激发到select_row函数中。

function next_row() {
    var elem = $('#data')[0].rows[parseInt($('#rownum')[0].value) + 1];
    select_row(elem);
}

function select_row(elem) {
    var selected = $(elem).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if (!selected) { $(elem).addClass("highlight"); }
    row = $(elem).closest("tr")[0].rowIndex
    $("#rownum").val(row)
}

window.onload = function() {
    var row;
    $("#data tbody tr").click(function(){ select_row(this) });
}

使用jQuery移动到第N个表行

3 个答案:

演示：http://jsfiddle.net/wygRe/