แถวของตารางและหมายเลขคอลัมน์ใน jQuery

ฉันจะรับหมายเลขแถวและคอลัมน์ของเซลล์ตารางที่ถูกคลิกโดยใช้ jQuery ได้อย่างไร

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

คุณสามารถใช้ฟังก์ชันCore / indexในบริบทที่กำหนดตัวอย่างเช่นคุณสามารถตรวจสอบดัชนีของ TD ใน parent parent TR เพื่อรับหมายเลขคอลัมน์และคุณสามารถตรวจสอบดัชนี TR บนตารางเพื่อรับหมายเลขแถว:

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

ตรวจสอบตัวอย่างที่ทำงานที่นี่

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

รับ COLUMN INDEX เมื่อคลิก:

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

รับ ROW INDEX เมื่อคลิก:

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

จากด้านบนของหัวของฉันวิธีหนึ่งคือการคว้าองค์ประกอบก่อนหน้านี้ทั้งหมดและนับพวกเขา

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

คุณสามารถส่งออกข้อมูลในเซลล์ขณะที่คุณกำลังสร้างตารางได้หรือไม่?

ดังนั้นตารางของคุณจะเป็นดังนี้:

<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>

แล้วมันจะเป็นเรื่องง่าย

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

มันจะดีกว่าที่จะผูกตัวจัดการคลิกไปที่ตารางทั้งหมดแล้วใช้ event.target เพื่อรับ TD ที่ถูกคลิก นั่นคือทั้งหมดที่ฉันสามารถเพิ่มเป็น 1:20