We Keep Coding

How to get Upper HTML Tag with Jquery

I trying to a class to my html page with jquery, here is my code.
<tbody>
<tr>
<td class="itmId">1</td>
<td class="entryNAmee">David</td>
</tr>
<tr>
<td class="itmId">2</td>
<td class="entryNamee">Alan</td>
</tr>
</tbody>
I am changing the td to input text with jquery on clicking in the every td except 1st column. that is working fine and when the above event perform the tr become like below.
<tr>
<td class="itmId">1</td>
<td class="entryNAmee nowText">
<input type="text" value="Alan">
</td>
</tr>
After making corrections an event working in blur. code is below.
js.
$(document).on('blur','table tr td input',function()
{
var fieldNewValue = $(this).val();
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
//console.log(fieldNewId);
alert(fieldNewId);
/*$.ajax({
typr:"post",
url:"updateEntry",
dataType:'json',
data:{newValue:fieldNewValue},
success:function(data)
{
console.log("updated succesfully");
}
});
*/
$(this).parents('td').text(fieldNewValue).removeClass('nowText');
$(this).remove();
});
I Want to add a class to the upper td of the the clicked td.
I tried the closest and parents jquery api's, But didnt work,
Anyone can please support me to how to catch the td ?
Also what are the different between closest and parents in jquery.
Thanks

Change:
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
to:
var fieldNewId = $(this).closest('tr').find('td.itmId').addClass("kkkkkkkkk");
You can read the docs to see the differences between .closest() and .parents(), however in your code you weren't traversing far enough up the DOM. $(this).closest('td.itmId') was looking for a td that didn't exist where you expected it to since it's a sibling of the parent cell that you were in.
You could also use (this).closest('td').prev() instead of (this).closest('tr').find('td.itmId')

There is also .prev in jQuery which returns the "upper" or better previous element in current context. It works just like this:
$(this).prev().addClass('kkkkkkkkk')

How exactly does this JQuery script work? and how can I modify it to select a specific object?

I am absolutly new in JavaScript and jQuery and I have the following problem.
I have the following jQuery script:
$(document).ready(function () {
$("thead.opening").click(function () {
$(this).next().slideToggle('slow', function () {
$(this).prev("thead.opening").toggleClass("active");
$("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
$("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
});
return false;
});
});
and in my HTML I have something like this:
<table class="standard-table-cls table-header-cls">
<thead class="opening active">
<tr>
<th>
<img class="imgAccordion" src="img/arrow_down.gif"/>
Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
</th>
</tr>
</thead>
<tbody class="expanded">
<tr>
<td style="width: 100em;">
SHOW SOMETHING
</td>
</tr>
</tbody>
</table>
...........................................................
...........................................................
...........................................................
<table class="standard-table-cls table-header-cls">
<thead class="opening">
<tr>
<th>
<img class="imgAccordion" src="img/arrow.gif"/>
Ricerca Fatture
</th>
</tr>
</thead>
<tbody class="expanded" style="display: none;">
<tr>
<td style="width: 100em;">
SHOW SOMETHING ELSE
</td>
</tr>
</tbody>
<table>
As you can see in my code there is 2 different tables both having the same classes (standard-table-cls table-header-cls).
When I click on the thead of one of these table it seems to me that the previous script is perfromed (it is right or am I saying wrong assertion?).
I think so because this statment:
$("thead.opening").click(function () {.......
means something like: perform the body of the defined function() when the user click on any thead element having class=opening.
Is it my reasoning correct?
No my doubt (and also the related problem) is: how jQuery know what is the specific thead.opening clicked by the user (the one related to the first table or the one related to the second table)?
What exactly represent the $(this) element in the previous script? (it is the selected object or what?)
And finally, how can I modify the previous script to obtain the reference of the inner tbody of the same table of the thead.opening clicked?
Tnx

I'll keep this as short as possible but this is the scope in the current function. In elements, its an element. So for you?
$("thead.opening").click
runs a function. So the $(this) is the thread.opening that was actually clicked.
Post

this statment ... perform the body of the defined function() when the user click on any thead element having class=opening.
yes that is correct.
how JQuery know what is the specific thead.opening clicked by the user
the answer lies in: $(this).next().slideToggle('slow', function ()....
What exactly represent the $(this) element in the previous script?
the object which is clicked.
obtain the reference of the inner tbody of the same table of the thead.opening clicked
use something similar to the following in the click handler:
$(this).closest('.standard-table-cls').children('tbody')
reference: here and here
hope this helps.

When I click on the thead of one of these table it seems to me that
the previous script is perfromed (it is right or am I saying wrong
assertion?).
You are right
Is it my reasoning correct?
This is correct
What exactly represent the $(this) element in the previous script? (it
it the selected object or what?)
$(this) referes to the element invoking the function $("thead.opening").click(function () {});, so $(this) is equal to $("thead.opening"), where thead.opening is the exact element clicked (not the other thead.opening in your document).
And finnally, how can modify the previous script to obtain the
reference of the inner tbody of the same table of the thead.opening
clicked?
$(this).next() (which is used in your exemple) is the selector to target the tbody. $(this).next()means this (clicked thead), find next sibling element (tbody).

$("thead.opening") returns a array of elements that match the selector, in your case the two separate table headers that have the class opening added to them.
the .click() assigns a click event handler to each of the elements returned by the selector. In your case to both the table headers.
$(this) refers to element which invoked the event in the event handler.
The code $(this).next().slideToggle( is already referencing the next sibling of the thead - in your HTMLs case, the tbody.

You will have to change your script and change selectors. Current $("thead.opening") will for example select all <thead class="opening"> tags, so it would have to be similar to this:
$(document).ready(function () {
$("thead.opening").click(function () {
var thisThead = $(this);
var thisTbody = thisThead.next();
thisTbody.slideToggle('slow', function () {
thisThead.toggleClass("active");
thisThead.find(".imgAccordion").attr("src", thisThead.is('.active') ? "http://placehold.it/30/ffffff/000000" : "http://placehold.it/30/000000/ffffff");
});
});
});
Check this Fiddle with 2 tables.

Display/Hide DIVs on tablecell hover (javascript)

I built a table with about 20 cells. Next to the table I want to display a <div> with a description, which should be displayed on hover or on click. There are heaps of solutions available on the web, but none really fits.
I already know I do need JavaScript, so i have my table cell
<td class="des1">Content</td>
and
<div id="des1">my Description1</div>
I add a class to the cells because some descriptions are called by more than one cell.
So, I need a JavaScript function to show the div "des1" on hover/click of all cells of class "des1", and also hide all other descriptions shown before. And that is my problem.
All my descriptions are wrapped in on other div so can I hide all divs in the wrapper and then display the right description. What is the best way to do this (event handling? inline?) Should I use CSS in Addition?
I do not have much experience in Javascript so I would appreciate any help or tips.

There are two basic parts to what you are trying to achieve:
event handling (to do things in response to the user hovering/clicking)
DOM manipulation (to change the description).
I would strongly advise using the jQuery library to help facilitate both of these.
Using jQuery you can easily "bind" an event handler which will do something in response to a cell being clicked or hovered over. For instance:
$('.des1').click(function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
});
The hover handler is similar, although slightly more complicated because it lets you specify both what happens when the user starts hovering and when they stop:
$('.des1').hover(function() {
// Whatever you put here will be triggered when the user hovers over an element
// with class "des1"
}, function() {
// Whatever you put here will be triggered when the user stops hovering over an
// element with class "des1"
});
Inside the handlers you'll want to add logic to modify the text of the element with the appropriate ID, which you can do using jQuery's text method:
$('#des1').text('My Description #1');
Combining the two, and sharing a function between them, you get something like:
var showDescription1 = function() {
// Whatever you put here will be triggered when the user clicks on an element
// with class "des1"
};
$('.des1').click(showDescription1)
$('.des1').hover(showDescription1, function() {
// if you want to change the description back when the user stops hovering, you'd
// add that logic here
});

<style>
div.des {
display: none;
}
</style>
<table>
<tr>
<td class="des1">Content 1</td>
</tr>
<tr>
<td class="des2">Content 2</td>
</tr>
<tr>
<td class="des3">Content 3</td>
</tr>
</table>
<div id="des1" class="des">Description 1</div>
<div id="des2" class="des">Description 2</div>
<div id="des3" class="des">Description 3</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('table td').on('click', function() {
var $des = $('#' + $(this).attr('class')),
visible = $des.hasClass('active');
$('div').hide();
if(visible) {
return;
}
$des
.addClass('active')
.show();
});
</script>

Show/hide table row if a child DIV is empty

I have a table with multiple entries. After each entry table row is an edit table row, with a column spanned cell, inside of which is a DIV which HTML is dynamically loaded into. The problem is that having all these empty table rows causes a lot of extra whitespace to appear on the page when it's rendered.
I understand I can't dynamically load HTML directly into the cell, so I have a DIV in it which I load the content into.
I want to hide any table row while the child DIV in it is empty, and show that table row once information has been dynamically loaded into the child DIV. This dynamically loaded information can also removed so I need it to be hidden again once it's empty again.
<table width="100%">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr style="display: none;">
<td colspan="3"><div></div></td>
</tr>
</tbody>
</table>
$("tr").each(function() {
if (this.children().filter(":empty").length) {
this.hide();
} else {
this.show();
}
});

The div isn't a child, it's a grandchild, thus children() won't find the divs. Use the context or find instead.
You are operating hide and show on the DOM element, not the jQuery element. You need to wrap it in jQuery first.
Therefore, run this code everytime you load something:
//find empty divs and hide it's tr
$("div:empty").closest('tr').hide();
//find non-empty divs and show it's tr
$("div:not(:empty)").closest('tr').show();
And look ma! No loops! No each! :D

You should use $(this) instead of this.
Reason being: $(this) is a JQuery object, which allows you to call JQuery methods like .children() and .filter(":empty") on it, whereas this is only a Javascript object...

Referencing an html input element using jQuery

I have the following (repeating) html:
<tr>
<td>Some text</td>
<td><a href="#">Click me<a/></td>
<td><form><input type="hidden" value="4"/></form></td>
</tr>
Using jQuery on the click event of the link I want to retrieve the value of the input element. I have tried all kinds of parents(), children(), nextAll(), prev() combinations but I can not get the value of the input element.
Here is a link to my testing functions. jsFiddle Link
Additionally how would i retrieve the text of the first td element?
Thanks a lot for helping me achieve this.
Michael

You can use parent to get to the td from the a, then next to get to the following td, and then find to get to the input element:
$("a").click(function() {
var value = $(this).parent().next().find("input").val();
});
Here's an updated fiddle.
To get the text from the first td you can take pretty much the same approach, but use prev instead of next.
Also, seeing as you have several repetitions of the HTML snippet, it's probably going to be more efficient to bind the click event handler higher up the DOM tree (maybe you already are, you haven't posted any JS so I don't know):
$("table").on("click", "a", function() {
//Do stuff
});

My usual approach to these things is to use closest to go back to some common container and then find to come back down:
​$('a').click(function() {
var $input = $(this).closest('tr').find('input');
// Do something with $input.val()
});​
Demo: http://jsfiddle.net/ambiguous/Zh6Zk/
The closest/find approach withstands DOM structure changes fairly well so you don't have to worry that much about moving things around in your HTML.

it will give you the input value
$(document).ready(function(e) {
$('.myAnchor').click(function(e){
var parentNode = $(this).parent();
var valueOfInput = $(parentNode).next().children('input').val();
alert(valueOfInput);
});
});
html:
<form>
<table>
<tr>
<td>Some text</td>
<td>Click me</td>
<td><input type=hidden value="4"/></td>
</tr>
</table>
</form>