Pertanyaan jQuery: bagaimana cara memilih kolom N terakhir dari setiap baris dalam sebuah tabel?


Saya memiliki meja dengan 6 kolom. Saya ingin menjalankan fungsi pada 3 kolom terakhir dari setiap baris (tidak termasuk baris header). Saya memiliki pemilih berikut yang berfungsi:

$('table.listviewtable > tbody > tr:gt(0)').find('td:gt(2)')
    .each(function () { runMyFunction($(this)); });

Apakah ada cara untuk melakukan ini semua dalam satu pemilih (yaitu, tanpa perantara find)?

Memperbarui:

Saya sudah mencoba

$('table.listviewtable > tbody > tr:gt(0) td:gt(2)')

dan

$('table.listviewtable > tbody > tr:gt(0) > td:gt(2)')

tetapi mereka tidak berfungsi. Mereka mengembalikan kolom ke-4, ke-5, dan ke-6 dari baris ke-2 dan semua kolom dari semua baris berikutnya.


4
2018-04-29 21:45


asal


Jawaban:


Di sini Anda pergi:

$('table.listviewtable td:nth-child(n+4)')

Demo langsung:  http://jsfiddle.net/simevidas/qJ3tP/1/

(Saya mengasumsikan Anda menggunakan elemen TH untuk sel-sel header.)


7
2018-04-29 21:53



Aturan

Aturan umum untuk mendapatkan X TD terakhir dari TR adalah:

$('#tbl tr td:nth-last-child(-n+X)');

Contoh

// Example for the last 3 paragraphs in some section:
$('#my_section p:nth-last-child(-n+3)');

// It's exactly the same as:
$('#my_section p:nth-last-child(3-n)');

Demo

<!-- CSS -->
<style>
  td {
    border: solid 1px #999;
    padding: 2px;
  }
</style>

<!-- HTML -->
<p>Last 3 cells made gray using jQuery</p>
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
</table>

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('table tr td:nth-last-child(-n+3)').css('background', '#CCC');
  });
</script>

Terima kasih

http://css-tricks.com/useful-nth-child-recipies/


6
2017-08-25 14:24



$('table.listviewtable > tbody > tr td:gt(2)')

1
2018-04-29 21:47



Pemilih yang paling mudah, dan paling jelas, adalah:

$('tr').each(
function(){
    $(this).find('td:gt(2)').css('background-color','#ffa');
});

JS Fiddle.

Diedit karena aku idiot, dan mengabaikan kesalahan yang jelas dalam saran pertama. Kebetulan, saya mengasumsikan mark-up yang tepat, menggunakan th untuk baris judul. Namun Anda dapat mengubah pemilih ke:

 $('tbody tr')

Untuk mengatasi itu, jika Anda tidak menggunakan th elemen.


0
2018-04-29 21:47



bagaimana tentang

$('td:gt(2)', 'table.litviewtable')

tentu saja jika Anda menggunakan th di header.


0
2018-04-29 22:03