We Keep Coding

Way to find a td inside of a tr. (Javascript)

I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.

Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');

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

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/

next() not working

I have a table structure:
<tr>
<td>
</td>
<td>
data
</td>
</tr>
<tr>
<td>
<img src="#" class="cc" />
</td>
</tr>
<tr>
<td>
</td>
<td>
data2
</td>
</tr>
<tr>
<td>
<img src="#" class="cc" />
</td>
</tr>
Now, on load, 2nd and 4th row are hidden. On click of <a> its immediate next rows <img> should come into display.
For that i have written:
$("a.xx").click(function (event) {
$(this).next(".cc").toggleClass();// not working
});
Any clue?
EDIT:
On click of 1st row's <a>, it should show 2nd row's <img> and on click of 3rd <a>, it should show 4th row's <img>, and only one <img> at a time.
CSS
.cc {
display: none;
}

EDIT: Based on further clarification, you want a second click to close an open image.
Do this:
$(this).closest('tr').next('tr').find("img.cc").toggle()
.closest('tr').siblings('tr').find("img.cc").hide();
or this, which is a little more efficient:
$(this).closest('tr').next('tr').find("img.cc").toggle(0, function() {
var $th = $(this);
if( $th.is(':visible') )
$th.closest('tr').siblings('tr').find("img.cc").hide();
});
EDIT: Based on clarification, seems like you want to show the image in the next row, and hide the rest.
Do this:
$(this).closest('tr').next('tr').find("img.cc").show()
.closest('tr').siblings('tr').find("img.cc").hide();
http://api.jquery.com/siblings/
Original answer:
Do this:
$(this).closest('tr').next('tr').find("img.cc").toggleClass('someClass');
jQuery's .next() only looks at the siblings of the element.
You need to traverse up to the .closest() <tr> element, get the .next() row, then .find() the .cc element.
http://api.jquery.com/closest/
http://api.jquery.com/next/
http://api.jquery.com/find/
I also assume you're passing a class name to .toggleClass() instead of calling it without an argument.
Otherwise, to display the <img> you would probably use .show().

Setting <td> value using jquery

I have the div structure shown below. For the second <td> in the table i want to replace with a hyperlink whose href attribute is stored in the variable myLink.
How can i do this with jquery ?
Please help.
Thank You.
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<h2 class="mainTitle">Transfer Membership</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>

You can do something like this:
// you said this was already set
var myLink = 'http://stackoverflow.com/questions/2761234';
var $a = $('<a>').attr('href',myLink).text('My Link!');
$('.pbHeader td:eq(1)').empty().append($a);
This uses the :eq() selector to grab the second TD underneath a .pbHeader (:eq is zero based, so 0 is the first element, 1 is the second element). It empties your and appends the generated <a> tag inside of it.
You could also do this:
$('.pbHeader td:eq(1)').html('My Text!');
Which sets the innerHTML of that <td> to be your "link"
jsbin preview