We Keep Coding

JQuery - current table row of item

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.

Using $.contains to find if an element contains another with focus

I have the following JQuery, which is part of the handling for double-clicking a table row. If the row contains an input box with active focus I want to exit the function, otherwise I want to proceed:
$("#foo tbody tr").dblclick(function() {
if ($.contains( $(this)[0], document.activeElement)) {
return;
}
// otherwise, do something with the row
});
However, it's not working: the conditional apparently always returns false (the activeElement not in the double-clicked row), even when the row does contain an input box with focus.
What's wrong?
EDIT: what I'm doing here is moving the row from one table to another when it is double-clicked. But each row contains a cell which contains text that can be clicked on to edit it (when the user clicks once on the cell text, it becomes an input box). What I find is that if the user is editing this cell but double clicks on the row, the move happens, which I want to avoid.

You can add a class to the element with focus and check for that in your doubleclick event. You can then remove the class whenever it's needed.http://jsfiddle.net/uq0ga86v/5/
$('input').focus(function(){
$('input').removeClass('focus');
$(this).addClass('focus');
})
$("#foo tbody tr").dblclick(function() {
if ($(this).find('input.focus').length != 0) {
alert('g');
}
// otherwise, do something with the row
$(this).find('input.focus').removeClass("focus");
});

Better handle the double click directly on the expected input, doing on a row will raise the blur event on any active element inside the row.
FYI, you can delegate that event to the row (see: Direct and delegated events)
$("#foo tbody tr")
.off(".nsActive")
.on("dblclick.nsActive", ".expected-input", function (e) {
//code here
});
Keep in mind that in this case we employed the event delegation to "#foo tbody tr" meaning that element must exist before delegating the dblclick event on ".expected-input" to it.
See jQuery.on: Event names and namespaces and Direct and delegated events.

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

Action on clicking out of a form, inside a table

To start here is the fiddle with all the relevant code: http://jsfiddle.net/baruck/43787/
I'm building a webapp that at some point the user needs to register a number of items.
It is a big form, and this section of the form is inside a table.
Each input tag is inside a td followed by a span. When the user clicks to edit a certain row a script hides the span (that holds the value of the input) and shows up the input. When the user click on another row (or creates a new one) the script picks the value of the input add it/change the span text and hides the input and shows up the span.
When user clicks on some row, it first selects the row adding the 'editing' class to it, and the second click put the focus on the input.
While I'm clicking inside the table all goes well; the problem is when I click outside of the table that contains the inputs or hit tab after the last input on the active row. The focus go somewhere else...
When one of those two action happens I want to 'deactivate the row', meaning pick up the values from the inputs on that row, add/change them in the span, hide the input and show the span.
Summary: need to fire this function when clicking outside of the table with a class of 'editable' or when 'tab away' on the last input of row...
function deactivateRows() {
//Deactivate editing on the rows
$('table.editable tr.editing').removeClass('editing');
$('table.editable').find('td').not('.delete').each(function () {
$(this).find('input').each(function () {
var inputContent = $(this).val();
$(this).prop('disabled', true).addClass('hide').attr('value', inputContent);
$(this).parent().find('span').html(inputContent).removeClass('hide');
});
});
}

I think the trick will be to traverse up the DOM from a clicked element, or the related element of a blur event, and see if you hit table.editable. Something like this:
var isInsideEditable = function (el) {
return !!el && $(el).closest('table.editable').length > 0;
};
$('select, input, textarea', '.editable').on('blur', function (e) {
if (!isInsideEditable(e.relatedTarget))
deactivateRows();
});
$(window).on('click', function (e) {
if (!isInsideEditable(e.target))
deactivateRows();
return false;
});

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