I have datatable and trying to catch column+row index when user press on it:
$('#datatable tbody').on('click', 'tr', function(){
var eq = $(this).index();
console.log(eq);
});
So, I could catch index of row (tr) by this way. However, I need also column (td index) with it. Does anyone could advise some approach?
Here is an example of similar task, just from backside (when someone needs few catchers). I am not good enought in jquery to convert it to my trouble.
You can listen for td clicks and then get the indices of both the clicked td and it's parent tr:
$('#datatable tbody').on('click', 'td', function(){
var clicked_td = $(this);
var td_index = clicked_td.index();
var tr_index = clicked_td.parent().index();
console.log(td_index);
console.log(tr_index);
});
Related
Excuse me, now I am using this Bootstrap table. I don't know how to remove a row in the table, I have seen one similar example in the documentation, but I don't really understand what it means. Especially I don't know what {field: 'id', values: ids} means. The user experience I want to achieve is click button in any row that I want to remove, then that row will be removed.
Get defined bootstrap table as variable.
let table = $('#table');
Detect click event with remove button
$(document).on('click', '.removeRowButton', function() {
In bootstrap-table elements in rows have data-index.
Next row getting clicked row index
let rowid = $(this).closest('tr').data('index');
Built in function for removing rows
table.bootstrapTable('remove', {
field: '$index',
values: [rowid]
});
let table = $('#table');
$(document).on('click', '.removeRowButton', function() {
let rowid = $(this).closest('tr').data('index');
table.bootstrapTable('remove', {
field: '$index',
values: [rowid]
});
});
$(document).on('click', 'button.removebutton', function () { // <-- changes
$(this).closest('tr').remove();
return false;
});
I have a html table (Bootstrap 3) which has a button in its last td of each row. This button has a class btn-add-row. In my Javascript I use (from this question):
$('.btn-add-row').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
Now, the row which is cloned also contains that specific button. It copies the button without issue, but when you click the button in the row which was added, the javascript is not executed. The copied button does have the class btn-add-row, and clicking buttons which were originally already on the page still work.
How can I fix this issue?
You have to options here.
First to add click handler for cloned row
function clickHandler() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find('.btn-add-row').click(clickHandler);
$clone.find('input').val('');
$tr.after($clone);
}
$('.btn-add-row').click(clickHandler);
And the other to use event delegation
$( "table" ).on( "click", ".btn-add-row", clickHandler);
I have a table like:
When user selects Edit, it opens up a bootstrap Modal containing all td of the tr the Modal is launched from. What I've done so far is:
Get Row Index on Edit Click:
$(document).on('click', '#editNominHref', function(e) {
var global_edit_row = $(this).closest('tr').index();
$('#editNomiModal').modal('show');
});
What I want is:
$('#editNomiModal').on('show.bs.modal', function () {
$("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
// ..Similar for DOB, Relation and share%..
});
Question:
How do I pass the tr index from Edit.click to Modal.show function?
I don't believe you can pass data directly to the modal. However, you can use data attributes to modify the DOM which can then be read from the show.bs.modal event. Something like this:
$(document).on('click', '#editNominHref', function(e) {
$('#editNomiModal')
.data('row-index', $(this).closest('tr').index())
.modal('show');
});
$('#editNomiModal').on('show.bs.modal', function () {
var $tr = $('#myTable tr').eq($(this).data('row-index'));
var serial = $tr.find('td:eq(0)').text();
var name = $tr.find('td:eq(1)').text();
// and so on...
$("#Serial_field_of_Modal").val(serial);
$("#Name_field_of_Modal").val(name);
// and so on...
});
When you open the modal can't you just clone the <tr> and insert into modal-content?
$(document).on('click', '#editNominHref', function(e) {
var content = $(this).closest('tr').html();
$('#editNomiModal').find('modal-content').html(content).modal('show');
});
Obviously more formatting would be required.
Lets say I have a click event set up for all TRs, naturally each TR is filled with TDs, so when you click a TR you are also clicking a TD. Is there anyway to capture the TD (or its index) that was clicked as a result of a TR being clicked?
I thought perhaps something like this, but I'm not getting anything out of that.
$('tbody').on('click', 'tr', function(){
var thisEq = $(this+' td').index();
alert("thisEq: "+thisEq);
});
Demo
You can get the td using event.target
$('tbody').on('click', 'tr', function(e){
var thisEq = $(e.target).index();
alert("thisEq: "+thisEq);
});
Note : .index() gives 0 to n values, so you would get 0 for first td
Reverse the problem round - detect which td is clicked and detect the parent tr.
$('td').on('click', function(){
var tr = $(this).parent('tr');
alert(tr);
});
You could also do this through use of a delegated event handler. This one hooks onto each tr element but you could hook it onto the body as another submitter has just proposed
$('tr').on( 'click', 'td', function() {
...
});
I'm trying to alert message on click each column. I have a table in which three row and four column, now I want alert message with next column value on third column click of each table. I have tried this but all column get value not a particular column. my problem is this is invoke in every column click but I want alert message only when third column click of each row.
HTML
<table id='myTable'>
<tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
</table>
JS
$("#myTable tr").bind("click", function () {
alert($(this).children("td").eq(3).html());
});
Demo Here
please try this code
$(document).ready(function () {
$('#myTable tr').each(function (Mindex, Mval) {
$(Mval).find('td:eq(2)').click(function () {
alert($(Mval).find('td:eq(3)').html());
});
});
Try this
$('table#myTable tr td:nth-child(3)').on('click', function() {
alert($(this).next().html());
});
Check Here
$("#myTable tr td:nth-child(3)").click(function () {
alert($(this).next().html());
});
Try this:
$('#myTable').children('tr').children('td').eq(3).on('click', function() {
alert($(this).next().html());
});
The above function makes sure that you are calling the direct children elements but not any nested other same elements. Solves future regressions.
If your table is going to stay the same size there are answers that already work. If your table is going to grow I would recommend doing some event delegation. It will dramatically speed up the page if there are going to be a large number of event listeners.
$('#myTable').on('click', 'td:nth-child(3)', function(){
alert($(this).text());
});
See this jsfiddle, and this jquery documentation.
below code will find and set the desired column value
$('#myTable tr:gt(0)').each(function(){
// console.log($('td:eq(3)', $(this)).html());
alert($('td:eq(3)', $(this)).html());
$('#myTable').find('tr:gt(0)').find('td:eq(3)').html("hello");
});
Try this:
var thirdEle = $("#myTable tr td:nth-child(3)");
thirdEle.bind("click", function () {
alert($(this).html());
});