如何在表的特定单元格而不是整个表上应用onclick？

Question

Actually I am using a function that any cell in a table i click it gives its row index but i don't want it. I want if i click on cells of only last column it gives back the row index of that cell but only cells of the last column should have this functionality not others

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

By using this function i click on any cell it gives back the row index This is code of my table

<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();

                }
            }
        })
        });

Now this is code whenever i click on a row it return whole data of that row

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);
};

I want to only last cell clickable in row that when i click in last i returns data of that row except for last two cells in that row

Answer 1

This should do what you want:

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

to get data from each cell without last use:

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

EDIT:

here is native solution:

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);
    }
};

Here is browser support for matches https://caniuse.com/#feat=matchesselector

Answer 2

Following code works as you asked for :

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

JSFiddle example can be seen here.

If last bit of your code works for you then you can change the following for loop in you code :

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

to

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

and it should give you the data for the row except for the last two columns.

$('#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 3

Just get the number of rows present in <table> using length and compare it with the index of the clicked row.

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


}