如何在表格的特定单元格而不是整个表格上应用 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: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 for updated code

Answer 2

只需使用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 3

这应该做你想做的：

$('#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 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 );
 }


}