如何在表的特定單元格而不是整個表上應用onclick？

Question

實際上，我正在使用一個函數，我單擊表中的任何單元格都會給出其行索引，但是我不想要它。 我想如果我僅單擊最后一列的單元格，它會返回該單元格的行索引，但只有最后一列的單元格應具有此功能，而其他功能則不行

    $('#tbl tbody').on( 'click', 'td', function () {
             var row = $(this).parent().parent().children().index($(this).parent());
  alert(row);
        });

通過使用此功能，我單擊任何單元格，它會返回行索引這是我的表的代碼

<table id="tbl" class="table table-bordered table-dark">
                <thead>
                    <tr>

                      <th scope="col">Name</th>
                        <th scope="col">Auth Provider</th>
                        <th scope="col">Auth Unique Id</th>
                        <th scope="col">Match Id</th>
                        <th scope="col">Game Mode</th>
                        <th scope="col">Character 1</th>
                        <th scope="col">Character 2</th>
                        <th scope="col">Character 3</th>
                        <th scope="col">Character 4</th>
                        <th scope="col">Character 5</th>
                        <th scope="col">Character 6</th>
                        <th scope="col">Match Time</th>
                        <th scope="col">Action</th>
                        <th scope="col">Schedule Match</th>
                    </tr>
                </thead>

        <tbody>
        </tbody>

            </table>

$(document).ready(function() {

            var trHTML = "";

            $.ajax({
                url: '../php/admin/schedule_match.php',
                type: 'post',
                data: {},
                success: function(response) {

                    var data = $.parseJSON(response);
                    var table;
                    //table.clear();
                     table = $('#tbl').DataTable(); 
                     table.clear();
                     if(data!='') {               
                      $.each(data, function(i, item) {
                         table.row.add([ data[i].name, data[i].provider,data[i].auth,data[i].mid,data[i].mode,'<img width="100px" height= "70px" src=' + data[i].p1 + '>','<img width="100px" height= "70px" src=' + data[i].p2 + '>','<img width="100px" height= "70px" src=' + data[i].p3 + '>','<img width="100px" height= "70px" src=' + data[i].p4 + '>','<img width="100px" height= "70px" src=' + data[i].p5 + '>','<img width="100px" height= "70px" src=' + data[i].p6 + '>',data[i].time,'<button class="btn btn-primary delete" data-id-id=' + data[i].id + '>Delete</button>','<button class="btn btn-primary schedule" data-id-id=' + data[i].id + '>Schedule</button>']);
                     });
                         table.draw();

                }
            }
        })
        });

現在這是代碼，每當我單擊一行時，它將返回該行的全部數據

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};

我只想單擊行中的最后一個單元格，當我單擊最后一次時，我返回該行的數據，但該行的最后兩個單元格除外

Answer 1

這應該做您想要的：

$('#tbl tbody').on( 'click', 'td', function () {
   var $this = $(this);
   if ($this.is(':last-child')) {
      var row = $this.parent().index(); // this is the same as your code that get the row

      alert(row);
   }
});

從每個單元獲取數據而無需最后使用：

var data = $this.siblings().map(function() {
    return this.innerHTML;
}).get();

編輯：

這是本機解決方案：

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    if (target.closest('td').matches(':last-child')) {
        var tr = target.closest('tr');
        if (tr) {
            var cells = tr.getElementsByTagName("td");
            for (var i = 0; i < cells.length; i++) {
                if (!cells[i].matches(':last-child')) {
                    data.push(cells[i].innerHTML);
                }
            }
        }
        alert(data);
    }
};

這是瀏覽器對比賽的支持https://caniuse.com/#feat=matchesselector

Answer 2

以下代碼按您的要求工作：

$('#tbl tbody').on( 'click', 'td:last-child', function () {
  var row = $(this).parent().parent().children().index($(this).parent());
  alert(row);
});

JSFiddle示例可以在這里看到。

如果您的代碼的最后一部分對您有用，那么您可以在代碼中更改以下for循環：

for (var i = 0; i < cells.length; i++) {

至

for (var i = 0; i < cells.length-2; i++) {

並且應該為您提供該行的數據（最后兩列除外）。

$('#tbl tbody').on( 'click', 'td:last-child', function (e) {
  var row = $(this).parent().parent().children().index($(this).parent());

  var data = [];
  var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length-2; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(row)
    alert(data);
});

JSFiddle獲取更新的代碼

Answer 3

只需使用length獲取<table>存在的行數，然后將其與單擊的行的索引進行比較即可。

$('#tbl tbody').on( 'click', 'td', function () {
    var row = $(this).parent().parent().children().index($(this).parent());
    var num_rows = $(this).parent().parent().children().length;
    if(row == (num_rows - 1))
        alert(row);
});

Answer 4

document.querySelector('#tableId').addEventListener('click', function(){test(event)}, false);

function test()
{
 let col = window.event.target.cellIndex;
 let row = window.event.target.parentNode.rowIndex;
 let table=document.querySelector('table');



let tablelength =table.rows.length - 1 ;

if( row == tablelength ){
alert("row" + row + 
   " -column" + col );
 }


}