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>
Related
I have some html like the following
<tr>
<td colspan="3">hello</td>
</tr>
<tr class="RowName-Hide-YES" style="">
<td class="form-label-text">Page Tab: </td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">hello</td>
</tr>
<tr class="RowName-Hide-YES" style="">
<td class="form-label-text">Page Tab: </td>
<td></td>
<td></td>
</tr>
What I need to select out all rows of RowName-Hide-YES and hide them along with the previous row. Hiding the ones with the class is easy
dojo.query(".RowName-Hide-YES").style("display","none")
However to try and hide the row and the previous row I was trying to do:
dojo.query(".RowName-Hide-YES").forEach(function(node){node.style.display="none";node.prev().style.display="none"})
But it complains prev() doesn't exist. Can anyone help me out with this one?
Well, the reason the prev() doesn't work is because the forEach() callback passes a DOM node, not a NodeList (which is actually some kind of array with utility functions like prev() on it).
To make it work you have to wrap it inside a dojo.query() again, for example dojo.query(node).prev(). Another issue is that, because of the difference between a nodelist and a node, is that you can't directly apply style.display on it, but you'll have to either use the appropriate NodeList function, for example:
dojo.query(node).prev().style('display', 'none');
Or you have to retrieve the DOM node itself, for example:
dojo.query(node).prev()[0].style.display = 'none';
Also, please note that the prev() API is part of dojo/NodeList-traverse and the style() API is part of dojo/NodeList-dom. You have to include both modules to make it work.
A working example can be found on JSFiddle.
I figured this out. I need to do dojo.query again inside of the forEach to use prev
dojo.query(".RowName-Hide-YES").forEach(function(node){node.style.display="none";dojo.query(node).prev()[0].style.display="none";});
Have you tried just hanging onto it yourself?
var previous = null;
dojo.query(".RowName-Hide-YES").forEach(function(node){
node.style.display="none";
if (previous) {
previous.style.display="none";
}
previous = node;
});
This will help you:
dojo.query(".RowName-Hide-YES").forEach(function(node){ node.closest('tr').style.display="none"; })
The relevant piece of HTML is like
<tbody id="results">
<tr>
<td>
<input type="checkbox">
c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png
</td>
<td>someorg</td>
<td>somecategory</td>
<td>somepic.png</td>
</tr>
</tbody>
My intent is for the a elements next to the input elements to be visible or hidden depending on whether or not the input is checked.
Seems like it should be simple enough:
$('#results input').change(function() {
console.log("ok, this function got called.");
this.siblings('a').toggleClass('hidden');
});
inside a $(function() { ... });
But, that's not working. Nothing is being printed to the console when I test by checking or unchecking the element. Any idea why this might be? Need me to post any more code?
Add an id to the checkbox or class
<input type="checkbox" id="checkbox"/>
And use $(this) not this
$(this).siblings('a').toggleClass('hidden');
Working demo: http://jsfiddle.net/omnzocqq/
update
According to my idea, you forget to put the table wrap to tbody. But if you add your table wrapper element and edit this to $(this), your code works.
So you don't need to add a class or id to your checkbox.
http://jsfiddle.net/omnzocqq/3/
Demo
The issue is because within the handler this is a DOMElement. You need to wrap this in a jQuery object to be able to call jQuery methods on it:
$('#results input').change(function() {
$(this).siblings('a').toggleClass('hidden');
});
Example fiddle
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')
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.
I am trying to grab documentnumber attribute from the tr tags inside tbody, and save it in an array.
Below is the html , I am working on
<tbody class="line-item-grid-body">
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
</tr>
</tbody>
and this is what I did, which is not working. If I don't specify particular class then system also grabs inner tr tags, which I don't want
var docs = jQuery("#line-item-grid").find('tbody').find("tr[class='line-item parent-line-item line-item-show reorderable-row droppable-element']");
for (i=1;i<=docs.length;i++)
{
var tempValue = jQuery(docs[i]).attr('documentnumber');
alert(tempValue);
}
Any ideas?
There's several ways you could go about this. I would do the following....
var docs = $('.line-item-grid-body>tr');
Docpage: Child selector
Another option:
var docs = $('.line-item-grid-body').children('tr');
Bookmark and frequent this page ... Selectors - jQuery API
try this as your selector
$('tbody > tr','#line-item-grid');
Hmm i didn't test this (so check for typos), but off top of my head, i'd try something like this:
jQuery(".line-item-grid tbody > tr").each(function() {
alert($(this).attr('documentnumber');
});
You can define selectors one after another, pretty much same as in CSS.
Also check child selector (http://api.jquery.com/child-selector/) for selecting direct child elements.
Hope it helps