JQuery - current table row of item - javascript

I have a table with several rows and a "Details" button in one column in each row.
I need to get the current table row of the clicked Details button. Every button has the same class and id.
Thanks for any help.

You can delegate a click event from the table to the button selector, and get the closest tr on click, as follows:
$("#yourTable").on('click', '.details-button', function(){
var $row = $(this).closest('tr');
});

You can use jQuery parent() to get the row element on button click.
$('.button').on('click',function() {
console.log($(this).parent());
})
Also don't use same id's on elements.

Related

Cannot add click to only one table row

When I execute the following to add a click function to the cell at the end of A particular row, jQuery adds the click function to all of the rows. What am I missing here please?
og_rownum happens to equal a number 3, not a string, and the nth-child(8) column does exist in the table.
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
Thanks in advance....
It seems like you want to add a listener to only one row on your table. If thats the case just add id="yourID" to the tag that you want to manipulate.
Then in jquery, select it with
$('#yourID').click(function(e){
//code here
});
If you don't know which row needs to be manipulated, and want to choose it programmatically, then try this.
$("#game_lister_table tr").click(function(e){
$(this)...//selects the row that was clicked
})
I used to to this code when choosing specific Cell/ Cells in HTML table Like You
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
But I found there is an easy way is to Create Dynamically Id for cell every time you create row or cell you have an Easy way to use JQuery Selector for any (row , cell ,....etc)
var table = document.getElementById("myTable");
var rowIndex =table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.id="whatEver";
cell1.innerHTML = "<input type="text" id="txt'+rowIndex+'" />";
then your action came Next
$('#ID').on('click',function(e){});
Since the closest answer was removed, I'll add this.
Use "#game_lister_table tr:eq("+og_rownum+") td:nth-child(8)" to select the element you described.

How to detect select onChange in a row cell

I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!
I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});
$(document).on('change','td',function(){
//Do your abacadabra!
});

Click on table row except first cell

I have a html table in which rows and columns are adding dynamically.
Create dynamic row
var row = tableHolder.insertRow(0);
row.id = "row_0";
Create a cell
var cell = row.insertCell(0);
cell.id = "cell_0"
Now I need to attach a click event on the dynamically created row.
row.addEventListener('click', function(evnt) {
openPopup();
}, false);
A popup will open on click on the row.
Now I want when user click on first cell of every row, click event should not be fired and popup will not open.
You can use :gt selector in jquery to add click event on other rows.
Checkout the following link :
http://api.jquery.com/gt-selector/
If you have a table with id="mytable" then you can use jQuery's on() method to listen for events on the table which occur on any cell except the first one in each row. The reason for binding to the table is so that dynamicly created rows will still trigger the event (since the event will bubble up to the table).
// Listen for click event on anything but first cell in each row within #mytable
$('#mytable').on('click', 'td:gt(0)', function() {
alert('Got click on anything but the first cell');
});
// Dynamically create row for demonstration
$('#mytable').append('<tr><td>Cell 1</td><td>Cell 2</td></tr>');
Here's a fiddle: jsfiddle
Click on cell 1 and you will find no event fired, click on the second cell and the alert will appear.
Try this JQuery Solution
$('table tr td:not(:first-child)').click(function () {
openPopup();
});

row selection on row click but not on hyperlink click in one of the column in jquery datatable?

i have my customer dataTable which has five columns. one column contains hyperlink. One of the column is checkbox.
i want when user clicks on the row, that row should be selected(which means row color should change and checkbox
should be selected). i can do it with below code snippet
$("#customer").on('click', $.fn.getDataTablesClickHandler("#selectAll"));
//where customer is the html div associated with dataTable and call the same function which gets triggered
//on call of selectAll html element. Inside that function i toggle the class of row
It works great. But my problem is i dont want this to happen(i.e row seection) on click of link inside one of the column.
how i can do this?So basically how can i restrict firing getDataTablesClickHandler on click of certain link in a cell or
on click on cell?
Try this out, you want to check out which target is being clicked, and ignore it if it's an anchor tag.
$("#customer").on('click', function(event) {
if(event.target.tagName == 'A')
return;
$.fn.getDataTablesClickHandler("#selectAll").apply(this);
});
You could do something like this:
if customer is your table;
$("#customer").on('click', 'tr', function(){
if( !$(this).is('tr') )
return;
$.fn.getDataTablesClickHandler("#selectAll");
});

get value for each row on DB table

I have this Jquery code that is supposed to give me the result of a column if I click on it's row. I'm using Yii but the problem is mostly with the Jquery.
$(document).on('click', 'td.myLink a', function(){
$('input[name=\"ECCategory[ParentID]\"]').val($('#mainID').html());
$('.search-form form').submit();
});
This is what I have. What this does is gives me the result of the first row (mainID column) no matter which row I click on. What I want for example is to click on row 5 and get the mainID for row 5.
IDs are unique. So only one element can have the id mainID. You probably want to use $(this) within your click event to search from the selected element. For example:
$(function($){
$('td.myLink a').click(function(){
var tr = $(this).parent().parent(); // selected row
// get columns that you want from selected row using tr.find('...')
// ...
}
});

Categories