jQuery .on delegation, only direct children in selector - javascript

I am trying to use .on to bind an event only to direct children of an element.
The dom looks like this:
table > tbody > tr+ > td > table > tbody > tr+
So far I have tried:
table.find(">tbody").on("dbclick", ">tr", listenerFunction);
table.on("dbclick", "> tbody > tr", listenerFunction);
None of these works as expected and using table.on("dbclick", "tr", listenerFunction) collides with the nested table causing double triggers and the likes because both tables have this listener.
Any ideas most appreciated.
<table>
<tbody>
<tr><!--Selectable row, adds the row after with sub table --></tr>
<tr>
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

In your listener function use event.stopPropagation to stop the event bubbling back up to a parent tr.
function listenerFunc(e) {
e.stopPropagation();
// Do your thing...
}

My suggestion would be to either add an id or class to the child table. This would ensure that it doesn't conflict with any other element on the page or any modification that happens in future. Suppose you add a class nested-table to child table. The code will look like this:
$('table.nested-table tr').dblclick(listenerFunc)
As you have indicated that you reference to table, this should work:
table.on('dblclick', 'tr', listenerFunc)

If your first <table> is not nested itself, you can provide a selector that only matches <tr> elements that are not descendants of other <tr> elements:
table.on("dbclick", "tr:not(tr tr)", listenerFunction);

Try
var table = $('#tbl')
table.on("click", "> tbody > tr", listenerFunction);
function listenerFunction(e){
if(!$(this).children().filter($(e.target).closest('td')).length){
return;
}
console.log('direc tr')
}
Demo: Fiddle

It turns out that this is in part me forgetting to prevent event bubbling and in part a bug/missing feature in jquery 1.7.
The same code in two jsfiddles
jQuery 1.7.2
jQuery 1.9.1
In jQuery 1.7.2 passing ">tr" as the selector to .on does not work, I do not know if this is a bug or something that's just not implement in 1.7.2 however the .on method was added in 1.7.
The following code reproduces the error. I've tested this on Chrome running on Mountain Lion and Chrome running on window 7
HMTL:
<table id="outer">
<tbody>
<tr id="outer-row">
<td>Hello</td>
<td>World</td>
</tr>
<tr id="outer-row-1">
<td>
<table id="inner">
<tbody>
<tr id="inner-row">
<td>nested
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS:
$(function() {
var handle = function(e) {
console.dir(this.id);
};
$("#outer").children("tbody").on("dblclick", ">tr", handle);
$("#inner").children("tbody").on("dblclick", ">tr", handle);
});

Related

How disable event cell in table?

I have code like this:
<table>
<tr>
<td>Cel1
<td>Cel2
<tr>
<tr>
<td>Cel3
<td>Cel4
<tr>
</table>
How can I disable event jQuery? I tried this method:
cell.setAttribute("disabled","true")
$('td').unbind();
Will unbind all events on td elements.
Given your example HTML:
<table>
<tr>
<td>Cel1</td>
<td>Cel2</td>
</tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
</tr>
</table>
If you want to disable a given cell using jQuery, you'll need to do two things.
First, you'll need to select a cell. You can do this without changing the markup by using the :nth-child(), for instance - but to make it simple, let's add a class to the cell you want to disable:
<table>
<tr>
<td class="my-cell">Cel1</td>
<td>Cel2</td>
<tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
<tr>
</table>
Now, we can select the cell using jQuery as follows:
var cell = $('.my-cell');
To unbind event handlers from the element
From here, if you want to remove all events which are assigned to the element, you can use jQuery's .unbind() as Sofiene mentioned:
cell.unbind();
To hide the cell in the table
If you'd like to remove the cell from the table by setting CSS attributes, this can be done by setting the style attribute using jQuery's .attr(), for instance:
cell.attr('style', 'visibility: hidden;');

jQuery finding child elements of <table>?

I am trying to execute a function for each "tr" child element of my "table" with jquery, but this code does not identify the children. I've used this code for "div" based designs before and it works perfectly if I change the "table" and "tr" tags to "div" but it doesn't run here!
This is simple design:
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<table>
<tr align="center">
<input id="btnSearch" type="button" value="Search" />
</tr>
</table>
And this is jquery:
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").children("tr").each(function(){
alert($(this).text);
});
});
});
jsfiddle:
Note that the alert is run just once! And I have also removed the "tr" for children in my jsfiddle to make the code runnable...
could anyone help me?
The tr elements are not children of table, the are children of tbody (or thead or tfoot). The tbody element is automatically created if you don't specify it. You can figure this out easily for yourself if you inspect the generated DOM.
Long story short, either search for all descendants, with .find
$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")
or include tbdoy in your selector:
$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")
That being said, you also have to add the actual content inside td elements, as noted in the other answers.
If you are new to HTML and tables, read the MDN documentation.
There are 2 problems, an invalid html and the selector is wrong
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
then
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").find(">tbody > tr").each(function () {
alert($(this).text());
});
});
});
Demo: Fiddle
Problems were:
tables automatically have tbody elements inserted into the DOM, so you should not reference TR's as children of a TABLE element.
You referenced a non-existant text property instead of the jQuery text() function.
You probably want to reference the tds anyway (and probably only a specific TD in each row), as returning the text of an entire row (TR) seldom makes sense in HTML.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/TdGKj/1/
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch td:first-child").each(function () {
alert($(this).text());
});
});
});
The #tblSearch td:first-child selector basically says: "Find the element with id=tblSearch then search for any td elements that are the first child of their parent. Note I added a second column of dummy TDs cells to the JSFiddle so you could see this in practice.
There any many selectors for choosing specific children, which will vary based on your specific needs, but that just needs a little research of jQuery selectors
You don't need to use children at all. You can just create a selector -
$('#tblSearch tr td')
WORKING DEMO - http://codepen.io/nitishdhar/pen/Aiwgm
First you need to fix your HTML structure, place the child td elements inside each tr -
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>
Now you can alert each value using this javascript snippet -
$(function () {
$('#btnSearch').click(function () {
$("#tblSearch tr td").each(function(){
alert($(this).text());
});
});
});
Note - This will alert each value separately as you needed.
First of all fix up your html and add the correct tags around the cell data
Then this should do what you're wanting:
$('table#tblSearch tr').children().each(function(){
alert($(this).text());
});
You have multiple problems in the question you provided:
Your HTML is not valid; Place a td element inside each tr
Call the correct jQuery function. Instead of using children('tr'), which it won't find because there are no tr that are children to the table element (only tbody,thead, etc), you will need to call the find() jQuery function (e.g. find('td')) and from there you will be able to get the text of the cell; however, you may also be able to find tr and get text of the whole row in that case.

Jquery Remove TR with Event and immediate TR Above it

I have a dynamic table calendar that displays a row of "No Events Today" when there are no events for that day.
I'm trying to remove the TR for this particular content INCLUDING the TR immediately above it, however only when the particular TR displays "No Events Today".
This is the jQuery I came up with so far that half works, since it removes the content, but I need your help with the removing the date, too.
$("tr td:contains('No events today')").parent().remove();
My Demo
This is stripped down example of the table:
<table>
<tr>
<td class="CalendarEventDate" colspan="3">Saturday, March 1 2014</td>
</tr>
<tr>
<td class="CalendarNoEvent" colspan="3">No events today</td>
</tr>
<tr>
<td class="CalendarEventDate" colspan="3">Sunday, March 2 2014</td>
</tr>
<tr>
<td class="CalendarEventTime">All Day</td>
<td class="CalendarEventName">Event Name Here</td>
<td class="CalendarEventLocation">Remote</td>
</tr>
</table>
$("tr td:contains('No events today')").parent().hide().prev('tr').hide()
You want to remove the previous sibling of the tr-element which encapsulates the td-element with "No events today" as well.
jQuery provides the .prev() function.
Something like this shoudl work:
$("tr td:contains('No events today')").parent().prev().remove();
I think you are looking for jQuery.prev. See the following example.
//Find the first td.
var tr = $("tr td:contains('No events today')").parent();
//Find the previous element and remove it from the DOM.
tr.prev().remove();//Could be written tr.prev(".CalendarEventDate").remove();
//No remove the first td from the DOM.
tr.remove();

Jquery click handler not working in a table [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I am using a Jquery plugin called Jquery Content Panel Switcher. It does exactly what the title says, it switches out divs with ease. The html for the page is:
<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>
<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>
<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>
In each of my content panels I have a form. In each form there is a table:
<table class="table table-hover" data-controller="rank">
<thead>
<tr>
<th colspan="4" align="left"><h2>Rank 1</h2></th>
</tr>
<tr>
<th>Number</th>
<th>Requirements</th>
</tr>
</thead>
<tbody>
<tr data-name="one_li">
<td>1</td>
<td>Info</td>
</tr>
<tr data-name="two_li">
<td>2</td>
<td>More Info</td>
</td>
</tr>
</tbody>
</table>
I am trying to fire off an action if a row gets clicked. Here is the javascript I am using:
$(document).ready(function(){
$('#switcher-panel form table tbody tr').click(function(){
console.log("Clicked");
});
});
When I use the Jquery selector of $('#switcher-panel form table tbody tr') in my Chrome console, it finds the table and everything looks fine. When I put it in my javascript file, nothing happens. Some direction would be great. Thanks for the help.
This will work:
$('#switcher-panel').on('click', 'table tr', function() {
console.log("Clicked", this);
});
Example
This adds a listener to the #switcher-panel that listens for click events on it's children, if the clicked child falls under the 'table tr' selector.
Check out this artice for more info about event delegation. (Ctrl+f for Event delegation)
If the content of the panel is dynamically appended you would need to delegate the click event to a static parent element. Try this:
$('#switcher-panel').on('click', 'form table tbody tr', function(){
console.log("Clicked");
});
My guess would be you could shorten the child selector to table tr as well.

Highlighting columns in a table with jQuery

I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?
Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.
Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");
Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.
Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")
Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")
This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/

Categories