We Keep Coding

Jquery select first parent of <td> tag in HTML table

I'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?

Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO

Use .siblings() in jquery
$(this).siblings('th.aco').text();

$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().

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

Get ID of first cell in a specific table

Given,
<table id=ThisTable>
<tbody>
<tr>
<td id="ThisCell">
</td>
</tr>
<tr>
<td id="NotThis">
</td>
</tr>
<tr>
<td id="NorThis">
</td>
</tr>
</tbody>
</table
How can I use JQuery/Javascript to assign the ID of the first table cell in #ThisTable to the variable "Selected"?
The result in this case should look like:
var Selected = "ThisCell";
I need to get the first cell's ID without having any knowledge of what the ID is, probably using the :first selector. In addition, this isn't the only table on the page, so it must be referenced with its ID.

var Selected = $('#ThisTable td:first').attr('id');
This selects the first td element that is a descendant of the element with ID ThisTable, returns its id attribute and assigns it to Selected.
JSFiddle

Just:
$("#ThisTable tbody tr:first td:first").attr("id");

This code gets the first td of your table, then stores its id in a variable Selected.
var Selected = document.querySelector("#ThisTable td").id;
Pure DOM methods, fastest method here, and works on 91.71% of browsers according to Can I use.

$(function () {
console.log($($('#ThisTable').find('td')[0]).attr('id'))
});
http://jsfiddle.net/E9mPw/17/

jQuery find highest parent TD

I'm working on a code for a form contained within a table. I'm writing (with jQuery) a function to highlight the parent <td> of each <input> element. That part is simple - the code is just:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
The more complicated part is that some text fields are inside of a second table nested within a <td> of the first table. It would look like:
<table>
<tr>
<td> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
So my question is this: is there a way to use one jQuery statement to find the highest parent <td> of the <input> element? So in other words, can I combine:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
and
$('.myForm input').click(function(){
$(this).parent().parent().addClass('active');
})
into one function?

The best solution is to add a class to the table you actually want to target. This means that you could update the markup in future without necessarily breaking the JS, by doing something like $(this).closest('.targetElement').addClass('active').
If you can't do that, you can use parents('td').last(). This selects all td parent elements and then gets the last one.
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
See the jQuery manual:
closest
parents
last

Try doing this:
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})

I'd suggest trying:
$(this).parents("td").last()
It will find all table cell ancestors of the current element. The last one should contain the highest level table cell element.

you can try:
$(this).parents('td:last');
or
$(this).parents('td').last();

Give your top-level td element a class name:
<table>
<tr>
<td class="topTD"> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
$('.myForm input').click(function(){
$(this).closest('td.topTD').addClass('active');
});

Quick&dirty :)
$(this).parents('td')[--$(this).parents('td').length]

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/