meaning of this jquery code - javascript

I posted a question next() not working and gota reply which is working fine, but can somebody explain me what exactly is going on here:
$(this).closest('tr').next('tr').find("img.cc").toggle()
.closest('tr').siblings('tr').find("img.cc").hide();

<tr> <<-- 1.) <<-- 6.)
<td>
<<-- we start here
</td>
<td>
data
</td>
</tr>
<tr> <<-- 2.) <<-- 5.)
<td>
<img src="#" class="cc" /> <<-- 3.) <<-- 4.)
</td>
</tr>
<tr> <<-- 6.)
<td>
</td>
<td>
data2
</td>
</tr>
<tr> <<-- 6.)
<td>
<img src="#" class="cc" /> <<-- 7.)
</td>
</tr>
1.) $(this).closest('tr')
This line jumps to 1.)
2.) .next('tr')
We're arriving at 2.)
3.) .find("img.cc")
Now, we hopefully found element at 3.)
4.) .toggle()
We switch visibilty from element 4.) (visible/hidden)
5.) .closest('tr')
We jump back to the closest parent tr
6.) siblings('tr')
We receive all tr's marked with 6.)
7.) .find("img.cc").hide();
Find the img.cc within all siblings tr's -> 6.)
and hide them.

It does the following, each step related to the method called:
.closest('tr') - go from the current element up to the nearest <tr> ancestor (or itself, if it's already a <tr>).
.next('tr') - go to the next sibling row
.find("img.cc") - finds a <img class="cc"> inside that row
.toggle() - toggle it (show if hidden, hide if shown)
.closest('tr') - go back up to the <tr>
.siblings('tr') - select all sibling (other) rows
.find("img.cc") - find all the <img class="cc"> in them.
.hide() - hide them
It could be a bite more efficient though using .end() to hop back in the chain, like this:
$(this).closest('tr').next('tr').find("img.cc").toggle()
.end().siblings('tr').find("img.cc").hide();

This code is probably taken from in middle the context of a function
the first line says something like:
Starting from this (the element/s called on), Find the nearest (parent) tr then look for the next tr(meaning a brother of this parent) and find an img with the class of "cc" andtoggle its display value (meaning, if its visible then hide it and if its hidden show it.
The second line starts from where it finished, and says find a img with a class of "cc" in the siblings of the nearest (parent) tr's next tr and hide that it.

Toggles visiblity of img.cc in the next table row and hides all other img.cc in the table.

Related

Get the column value <td> from a selected row <tr> by the class Attribute

A short question: i use a usually html + twig table which i fill with a lot values. The important part of this table looks like that:
{% if rec.pDsDuplicate =='0'%}
<td class="PFu1Exists">
{{rec.getPFu1Exists()}}
</td>
<td class ="PFu2Exists">
{{rec.getPFu2Exists()}}
</td>
<td class ="PFu3Exists">
{{rec.getPFu3Exists()}}
</td>
<td class= "PFu5Exists">
{{rec.getPFu5Exists()}}
</td>
<td class ="PSdqExists">
{{rec.getPSdqExists()}}
</td>
<td class="PFupExists">
{{rec.getPFupExists()}}
</td>
{% else %}
Now i use this function to select a row:
$("#search_results tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
after the selection, the row belongs to the class "selected".
Now my specify question: How i can get the value from the column with using the class/ID Attribut e.g PFu1Exists from the selected row.
of course, i can iterate about the row and compare, but im looking for a quick an short JQuery line.
during reading some posts here, i found the function closest and find, but how i have to write the statement that i can be shure!, that the query is just searching in the selected row.. ? and not will traverse up and down to the next row?
value= $(.selected).closest(.selected).find('.PFu1Exists');
thanks for your time!
with your click function, you already remove other selected classes. that means, within your table, there is only 1 tr that has selected class. So, You can just use it like :
$('.selected').find('.PFu1Exists');
by using find(), you will only search through its child / descendants. it wont find its siblings. you can read more from
You can use following code for this..
$("#search_results tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
alert($(this).find('.PFu1Exists').html());
});
OR you can use -
alert($('tr.selected').find('.PFu1Exists').html());
You don't need to use find() function to search inside <tr>.
you can directly use
$('.selected .PFu1Exists')
which will select the child <td class='PFu1Exists'> inside <tr class='selected'>.

Use JQuery to Unhide Table Rows

I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John
http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery
EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.

Div-Positioning fail and Style-Error because of JS-Sort

I have a table wich shows products. The table is created by a mysqli_fetch_array($var)
like:
<tr> <td>Product-Name</td> <td>Product-Nr</td> <td>Price</td> </tr>
and for the Details of the product, a div takes place (for xmlhttp), after the first tr, like this:
<tr> <td> <div id="det+php"> .... </td> </tr>
PROBLEM1: To make it viewer-friendly, i used tr:nth-of-type(even) to Color the <tr>, but since the div is inside a tr, the table is all white. But the Div-Part should be always white.
is there a command like "dont affect this tr" with the style?
PROBLEM2
Since i use asc/desc sorting in the table, the <tr> with the div gets sorted to the top/bottom what is very wrong, the <tr> with the div should be ALWAYS! be direct under the product <tr>, to display the details there
How can this be solved?
To show what i tried, i made a fiddle,
http://jsfiddle.net/pt2w3/33/
Im also open for ideas to solve this a complete other way

How to refresh only 2 column values from database onclick button

i have one table, in that i have 2 columns one is files & and another permissions.
for all table rows i have refresh buttons.
What i need is when i click the refresh button it should only refresh the columns of the same row,where the refresh button is.
but now it is refreshing the particular row and particular column, but when i change the values in database and click refresh, the changed value is not getting updated...
here is my code:
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
$("#buton").click(function(){
$(this).parent().siblings(".b1").load(".b1");
$(this).parent().siblings(".b2").load(".b2");
});
});
</script>
jsp code:
<table border="1">
<tr>
<td class = "b1"><s:property value="%{#u.files}" /></td>
<td class = "b2"><s:property value="%{#u.perm}" /></td>
<td><img src="images/refresh.png" title="Refresh" id="buton"></td>
</tr>
</table>
The $(this) in your button click function is the <img> element (which isn't closed by the way). The parent, which you call by $(this).parent() of that element is the <a> element, not the <td>. So you're searching for siblings of that <a> element instead of the <td> element.

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

Categories