如何选择表格的最后一行？

Question

我有以下div：

<div data-object-id="dsOrders" class = "OrderList" >

    <div class="table-responsive m-y-1">
        <table class="table">
            <thead>
                <tr>
                    <th style="width:110px;">ID</th>
                    <th style="width:110px;"> Order Date</th>
                </tr>

                <!-- FILTER ROW -->
                <tr>
                    <td>
                        <input data-search="OrderID" class="form-control form-control-sm">
                    </td>
                    <td>
                        <input data-search="OrderDate" class="form-control form-control-sm">
                    </td>
                </tr>
            </thead>

            <tbody>

                <tr data-repeat data-active>
                    <td data-field="OrderID" class = "OrderID"></td>
                    <td data-field="OrderDate"></td>
                </tr>
            </tbody>
        </table>
    </div>


</div>

如何使用javascript或jquery选择最后一行？我试过这样做

$("[.OrderList][tr:last]").focus();

但没有成功

Answer 1

使用此代码：

.OrderList >.table > tbody > tr:last-child { background:#ff0000; }

Answer 2

试试这个：

$('#yourtableid tr:last').attr('id');

或者这个：

$("#TableId").find("tr").last();

希望如果有帮助：）

Answer 3

$('#yourtableid tr:last').attr('id').focus();

或

$('#yourtableid tr:last')[0].focus();

应该有用。

Answer 4

＆＃13;

＆＃13;

console.log($(".OrderList table tr:last").html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-object-id="dsOrders" class = "OrderList" >

    <div class="table-responsive m-y-1">
        <table class="table">
            <thead>
                <tr>
                    <th style="width:110px;">ID</th>
                    <th style="width:110px;"> Order Date</th>
                </tr>

                <!-- FILTER ROW -->
                <tr>
                    <td>
                        <input data-search="OrderID" class="form-control form-control-sm">
                    </td>
                    <td>
                        <input data-search="OrderDate" class="form-control form-control-sm">
                    </td>
                </tr>
            </thead>

            <tbody>

                <tr data-repeat data-active>
                    <td data-field="OrderID" class = "OrderID"></td>
                    <td data-field="OrderDate"></td>
                </tr>
            </tbody>
        </table>
    </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

console.log($(".OrderList tr").last().html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >

    <div class="table-responsive m-y-1">
        <table class="table">
            <thead>
                <tr>
                    <th style="width:110px;">ID</th>
                    <th style="width:110px;"> Order Date</th>
                </tr>

                <!-- FILTER ROW -->
                <tr>
                    <td>
                        <input data-search="OrderID" class="form-control form-control-sm">
                    </td>
                    <td>
                        <input data-search="OrderDate" class="form-control form-control-sm">
                    </td>
                </tr>
            </thead>

            <tbody>

                <tr data-repeat data-active>
                    <td data-field="OrderID" class = "OrderID"></td>
                    <td data-field="OrderDate"></td>
                </tr>
            </tbody>
        </table>
    </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

尝试此代码您可以通过以下方式实现：

$('#first table:last tr:last')