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();
});
Related
I will write a method, that gives the Cell value from the clicked Bootstrap table. When I click at first the table heading, the th function was called. After that, I can't click on the cells. The tdOnClick() method is only working before I click to th. Why is that so?
my JS:
//if a cell was clicked, this function was called
function tdOnClick(){
var col = $(this)[0].textContent;
console.log(col);
}
You must add your tdOnClick() function after the function which creates your table body
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.
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.
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");
});
i have a div that contains a table
<div id="container">
<table id="data">
<tbody>
......
......
</table>
</div>
i have bindind the onclick event on table rows so that if the user clicks a row, it is highlighted
$("#data tr").mouseup(function() {
$("tr.selected").removeClass("selected");// Deselect currently selected rows
$(this).addClass("selected");
});
now if the user clicks somewhere outside the table, i want to deselect the row. the problem is if i bind the click event with the div, both the table and the div gets the callback...how can i only get a callback for the div? so that i can deselect the rows!! i even tried binding the onClick with the body element but it luks like if u bind an event with an element, all the elements inside it will get the callback. if thats the case how can i deselect the rows then if user clicks outside the bounds of table.
This is caused by the bubbling of nested elements. You can stop that by using
$("div").click(function(e) {
if($(this).attr('id')=="data")
{
e.stopPropagation();
return;
}
$(".selected").removeClass("selected");
});
$("#data tr").mouseup(function() {
$("tr.selected").removeClass("selected");// Deselect currently selected rows
$(this).addClass("selected");
});
From: http://api.jquery.com/event.stopPropagation