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().
Related
I have a calendar where the day cells are clickable "td" elements. Inside each is an "a" that has a title. I need to use this title in a JavaScript function that is called when any of the "td" elements are clicked. I had to disable the PostBack for all "a" elements
Here is code for one of the cells:
<td align="center" style="width:14%;">15</td>
I just need to access the 15 text technically. I can get the month elsewhere.
Is this possible using JavaScript?
Using jQuery for this would be a pretty good idea since you can select elements pretty conveniently. With jQuery you'd use:
$('td a').attr('title');
If you still want to use pure Javascript, you can select the title of the element by using:
document.querySelectorAll('td a')[0].title;
In the end, they both get the job done but the jQuery code is shorter.
So you'd do something similar to this with jQuery.
$('td a').on('click', function() {
console.log($(this).attr('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
<tb>
<tr>
<td>
Hey
</td>
</tr>
<tr>
<td>
Oh
</td>
</tr>
<tr>
<td>
Goodbye
</td>
</tr>
</tb>
</th>
</table>
It's not exactly clear to me what you're after, but if you can control the call, then including this in the call gives you a reference to the element that called the listener, e.g.
<a href="javascript:__doPostBack('ctl00$MainContent$Calendar2','6314', this)"...>
Then in the listener, you have a reference to the element and you can get its title property directly, e.g.
function __doPostBack(arg0, arg1, element) {
var title = element.title;
// title is the value of the element's title property
}
I had to disable the PostBack for all "a" elements
I don't understand what that means. If it means you don't want to use __doPostBack to get the title and want to add a listener to each of the links, then you can do that quite simply too:
window.onload = function(){
[].forEach.call(document.querySelectorAll('td a'), function(a){
a.addEventListener('click', showTitle, false)
});
};
function showTitle(){
console.log(this.title);
}
<table>
<tr><td><a href="#" title="foo">foo
<tr><td><a href="#" title="bar">bar
<tr><td><a href="#" title="fum">fum
</table>
<tr>
<td colspan="2" nowrap="" class="formDatanobrdr">
Click here
</td>
</tr>
They Are Not Click By Using the Below Code Please Tell how can i click the link
document.getElementsByName('formDatanobrdr')[0].click();
getElementsByName searches for elements with a specific name= attribute, which your html does not contain.
Instead search by class to access the td tag:
var td = document.getElementsByClassName("formDatanobrdr")[0];
//then select the a tag. its the only child element:
var link = td.children[0];
//click it
link.click()
you should use getElementsByClassName it get all elements with the specified class name, also you need to click the a tag not the table row tag so add new class to a tag
<tr><td colspan="2" nowrap="" class="formDatanobrdr">
<a class="formDatanobrdr1" href="https://wapking.net" onclick="redirectToHandler();">Click here</a></td></tr>
<script>document.getElementsByClassName('formDatanobrdr1')[0].click();</script>
querySelector can select one Element (the first in DOM corresponding to query)
So I give you the better unique query with your info
document.querySelector('tr > td.formDatanobrdr > a[href="https://wapking.net"]').click();
<tr>
<td colspan="2" nowrap="" class="formDatanobrdr">
Click here
</td>
</tr>
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.
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.
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