Baris tabel dan nomor kolom dalam jQuery

141

Bagaimana cara mendapatkan nomor baris dan kolom sel tabel yang diklik menggunakan jQuery, yaitu,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});
Jonas
sumber

Jawaban:

216

Anda dapat menggunakan fungsi Inti / indeks dalam konteks yang diberikan, misalnya Anda dapat memeriksa indeks TD pada induknya TR untuk mendapatkan nomor kolom, dan Anda dapat memeriksa indeks TR pada Tabel, untuk mendapatkan nomor baris:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

Lihat contoh yang sedang berjalan di sini .

CMS
sumber
Mengapa gagal pada kolom span @grom?
EarlyPoster
@Forkrul Assail, @CMS Gagal dengan ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Klik sel dengan teks "12" . Indeks kolom harus 4
Andrew D.
Saya memiliki beberapa data dalam variabel "data" ..... apakah mungkin untuk menambahkan "data" ini ke tabel dengan nilai col dan baris ini
shanish
2
ROWSPAN & COLSPAN mengatasi: Ini membuat klik berfungsi saat SPAN digunakan jsbin.com/eyeyu/1307/edit
eddyparkinson
9
var row = $(this).closest('tr').index()
SpYk3HH
119
$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
Phillip Senn
sumber
32

Dapatkan KOLOM INDEKS di klik:

$(this).closest("td").index();

Dapatkan ROW INDEX saat klik:

$(this).closest("tr").index();
Louie Santiano
sumber
21

Dari atas kepala saya, salah satu caranya adalah dengan mengambil semua elemen sebelumnya dan menghitungnya.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
Samantha Branham
sumber
6

Bisakah Anda menampilkan data itu dalam sel saat Anda membuat tabel?

jadi meja Anda akan terlihat seperti ini:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

maka itu akan menjadi masalah sederhana

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
Chris Brandsma
sumber
1
Spesifikasi html mana yang dipatuhi oleh atribut tersebut? Sepertinya saya tidak dapat menemukan mereka.
Samantha Branham
5
HTML spec 5, yang memungkinkan atribut khusus dimulai dengan awalan 'data-'.
Chris Brandsma
meskipun mereka tidak dalam spesifikasi, itu tidak akan merusak browser yang lebih lama <HTML5
Daniel Powell
1
Anda dapat mengakses bidang "data" hanya dengan menelepon: $ (ini). Data ('baris');
WhiteAngel
0

lebih baik untuk mengikat penangan klik ke seluruh tabel dan kemudian gunakan event.target untuk mendapatkan TD diklik. Itulah yang bisa saya tambahkan ke sini sebagai 1:20 pagi

mkoryak
sumber
Meskipun ini mungkin merupakan petunjuk yang berharga untuk menyelesaikan masalah, jawaban yang baik juga menunjukkan solusinya. Harap edit untuk memberikan kode contoh untuk menunjukkan maksud Anda. Sebagai alternatif, pertimbangkan menulis ini sebagai komentar.
Toby Speight
1
terima kasih, saya akan mempertimbangkan merevisi jawaban ini dalam 10 tahun lagi
mkoryak