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
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
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);
});
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);
});
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 );
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.