使用 jquery 根据他的数据设置最后一个 td 值

Question

我正在研究一个使用数据table创建的table。现在我想使用 jquery 设置最后一个 td 值。我尝试了不同的代码，但没有这样的运气。

<script type="text/javascript">
    $(document).ready(function() {

       $('#productsTable tr').each(function() {
           alert($(this).closest('tr').children('td.two').text());
           // alert($(this).closest('tr').find('td:eq(11)').text());
       });
    });
</script>

我没有得到 last td 的正确值。我的 table html 是：

<table class="display table table-bordered table-striped dataTable" id="productsTable" aria-describedby="productsTable_info">
    <thead>
        <tr role="row">
            <th class="sorting_desc" tabindex="0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 45.777777671814px;">Date</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Auction: activate to sort column ascending" style="width: 75.777777671814px;">Auction</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Bid no: activate to sort column ascending" style="width: 62.777777671814px;">Bid no</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 55.777777671814px;">Name</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Chassis No: activate to sort column ascending" style="width: 107.777777671814px;">Chassis No</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Year: activate to sort column ascending" style="width: 46.777777671814px;">Year</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Color: activate to sort column ascending" style="width: 53.777777671814px;">Color</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Mileage: activate to sort column ascending" style="width: 75.777777671814px;">Mileage</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Score: activate to sort column ascending" style="width: 58.777777671814px;">Score</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Bid: activate to sort column ascending" style="width: 35.777777671814px;">Bid</th>
            <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="End Price: activate to sort column ascending" style="width: 95.777777671814px;">End Price</th>
            <th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" aria-label="Result" style="width: 63.777777671814px;">Result</th>
        </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
        <tr class="odd">
            <td class=" sorting_1">2015-05-08</td>
            <td class="">SAA Sapporo</td>
            <td class="">3005</td>
            <td class="">FIT SHUTTLE</td>
            <td class=""></td>
            <td class="">2012</td>
            <td class="">WHITE</td>
            <td class="">23</td>
            <td class="">4.5</td>
            <td class="">0</td>
            <td class="">0</td>
            <td class="">1</td>
        </tr>
        <tr class="even">
            <td class=" sorting_1">2015-05-08</td>
            <td class="">SAA Sapporo</td>
            <td class="">55097</td>
            <td class="">PIXIS EPOCH</td>
            <td class=""></td>
            <td class="">2012</td>
            <td class="">.....</td>
            <td class="">8</td>
            <td class="">4.5</td>
            <td class="">0</td>
            <td class="">0</td>
            <td class="">0</td>
        </tr>
    </tbody>
</table>

我正在尝试设置结果值，例如 1 then winner 和 2 then losre 等，但问题是我没有得到最后一个 td 的值。我做错了什么。

Answer 1

您需要将 :last 选择器与 td 元素对象一起使用：

$('#productsTable tr:has(td)').each(function() {
 alert($(this).find('td:last').text());
});

这将提醒 trs 中每个最后一个 td 元素的文本。

Answer 2

既然你用的是数据表，那最好用datatables api

$('#productsTable tbody tr td:last-child').each(function () {
    var cell = table.cell(this),
        data = cell.data();
    if (data == 1) {
        cell.data('Winner');
    } else if (data == 0) {
        cell.data('Lost');
    }
})

演示：Fiddle

使用 jquery 根据他的数据设置最后一个 td 值

Set the last td value on basis of his data using jquery

html

javascript

jquery

html-table

datatables