We Keep Coding

How to apply CSS to children of TR based on TD content?

I'd like to hide a <div> or <td> inside the <tr> based on the content inside that <tr>.
If Stackoverflow is found inside a <tr>, hide .buttons from that <tr>.
This is what I've got so far.
<table class="sites">
<tbody>
<tr>
<td>
<div class="name">Stackoverflow</div>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
<tr>
<td>
<class name="">Stackexchange</class>
</td>
<td>
<div class="buttons">
buttons
</div>
</td>
</tr>
</tbody>
</table>
var t = $(".sites tr .name:contains('Stackoverflow')");
var d = t.parent('tr').children('.buttons');
d.css( "display", "none" );
I've made a fiddle: https://jsfiddle.net/3jk8e3b2/3/

Your traverses are not going to appropriate levels.
parent() is only immediate parent element, children() are only immediate child nodes
In your case parent of .name is a <td> not <tr> and the buttons are not immediate children of <tr> either.
Use closest() or parents() to allow going up more than one level. Use find() to allow going deeper than children()
Try:
var t = $(".sites tr .name:contains('Stackoverflow')");
t.closest('tr').find('.buttons').hide();
DEMO

jQuery get parent Element and hide it

Hey all I am trying to get the element from the HTML below:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
The jQuery code I have tried:
$("td[data-uid='" + uid + "']").parent().prev().fadeOut('slow');
The uid has the number 408bd653-c1bf value.
So I am not sure why its not finding the previous TR parent.

I think you should add a class to each button if you want to have many of them, not an id.
Like this:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed deleteButton">Delete Record</button>
</td>
</tr>
Then the JQuery:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle
EDIT:
If you want the previous tr to be deleted, try this:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr").prev("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle

You can pass a selector to the parent method, something like this:
$("td[data-uid='" + uid + "']").parent("tr").prev().fadeOut('slow');

Try this to hide parent tr element:
function deleteHit(el){
$(el).closest('tr').fadeOut('slow');
}
Or to hide previous tr element:
function deleteHit(el){
$(el).closest('tr').prev().fadeOut('slow');
}
NOTE, when using onclick attribute, you're passing this (clicked button) to the method. You should then add the button as argument (el) in your method, as shown above deleteHit(el)

There is no previous td. If your table looks like this:
<table>
<tr></tr> <!--- This gets hidden -->
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
</table>
Because:
$("td[data-uid='" + uid + "']") selects <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
.parent() selects <tr role="row" class="odd">
.prev() selects the previous element, which either is the previous <tr> or if there isn't a previous row is nothing at all.
If you want to fade out the current row (that the delete button is in) you would do this:
function deleteHit(el){
$(el).closest("tr").fadeOut('slow');
}
Now there's a much nicer way of doing this. Change your button definition to have a class (since you'll have more of them and you're only allowed one id on the whole page):
<button data-uid="408bd653-c1bf" type="button" class="btn btn-danger btn-embossed js-delete">Delete Record</button>
<script>
$(".js-delete").click(function(){
$(this).closest("tr").fadeOut("slow", function(){
// Remove the element from the DOM when the animation is done.
$(this).remove();
});
});
</script>

getElementsByTagName("table") - getting td on curious way

I have this simple example
<table border="1px">
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</table>
I wanted to get the first td element of the (first) tr element, I tried:
var td = document.getElementsByTagName("table")[0].children[0].children[0];
Because it's:
var td = document.getElementsByTagName("table")[0] for the table element itself
children[0] for the tr element
and children[0] again for the first td element
That's what I thought, but apparently this returns me the tr element and only adding another .children[0]got me the td element.
var td = document.getElementsByTagName("table")[0].children[0].children[0].children[0];
Why is that, or what have I missed here?

That's because you're forgetting about the <tbody> element, which is automatically inserted into the DOM.
What your table really looks like:
<table border="1px">
<tbody>
<tr>
<td> </td>
<td> <input type="button" value="Click" onclick="insertText()"/> </td>
</tr>
</tbody>
</table>
Hence why you needed to dig down through three levels of children to target the <td> element you wanted.
Side note: If you'd like to know more about why the <tbody> element is automatically injected into <table> elements if undeclared, see this question and its answers.

Why can’t I select a <td> using its class and data-test attributes in jQuery?

<table>
<tr>
<td class="ok" data-test="12-12 00">xxx</td>
<td class="ok" data-test="13-12 00">xxx</td>
<td class="ok" data-test="14-12 00">xxx</td>
<td class="ok" data-test="15-12 00">xxx</td>
</tr>
</table>
​I would like get the <td> where data-test = "14-12 00". Here’s my code:
alert($('td .ok[data-test="14-12 00"]').text());​
Why is this not working?
http://jsfiddle.net/LqD5h/

Try:
alert($('td.ok[data-test="14-12 00"]').text());​
(Notice there is no space between td and .ok).
You were originally trying to select all elements with classname ok that are descendants of a td and bear a certain data-test value.

How about another way to skin this cat?
alert($('tr .ok[data-test="14-12 00"]').text());​
Notice, td changed to tr. :-)

hide/show not working properly with jquery

I have a page with three rows of main information that all have a 'More Info' button attached, sort of like wefollow.com and their info button.
When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.
The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.
I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.
Any help would be awesome. Thanks.
Scripts
index
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
listing.js
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});

First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
combined with:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
Not sure why you need to hide siblings in the above though.
Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:
div.more-information { display: none; }

You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi. Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.