Selecting just one the closest element - javascript

I have problem with selecting just ONE the closest element by using jQuery.
My HTML code
<table>
<tbody>
<tr>
<td>
<span class="control"><img class="doAction"></span>
</td>
</tr>
<tr>
<td class="details">sometext</td>
</tr>
</tbody>
</table>
I would like to get the text from the .details after clicking on the image .doAction
But the problem is that I have multiple times this same HTML code, so I want just the closest to this img .details text to get.
How can I do that?

You can also use .parents() with .next() and .find()
$('.doAction').on('click', function() {
console.log($(this).parents('tr').next().find('.details').text());
});
Demo
Over here, am selecting the parent tr of the img tag with a class of .doAction and then am moving on to the next tr and searching for an element with .details
Note that it's .parent(s), if you want you can also use .parent() but then you need to use it thrice, like
$(this).parent().parent().parent().next().find('.details').text();
/* --^-- --^-- --^-- --^--
Selects span td tr goes to next tr and then finds for .details
and returns text */

$('.doAction').click(function(i, e)
{
e.closest('table').find('.details').html();
});
NOTE: Another approach would be to traverse up to the tr only, get the next sibling, then get the .details from there. This may be more precise as you might have several of these .doAction and .details elements in there:
$('.doAction').click(function(i, e)
{
e.closest('tr').next().find('.details').html();
});
Reference:
http://api.jquery.com/closest/

Use .closest() to traverse to table and then find td with .details in it:
$('.doAction').click(function(){
$(this).closest('table').find('.details').text();
});

Related

Remove particular class from all table rows

in which on particular tr elements i have a class "deleted_row" which should be remove from all tr elements which have that class. I gave a id, I think which can help me to do this.
Is anyone know any method to do above thing.
Thanks.
If I understand well you want to remove the class "deleted_row" to all elements which have that class. To do so, you need to select those elements and remove the class:
function removeClass() {
const rows = Array.from(document.querySelectorAll('tr.deleted_row'));
rows.forEach(row => {
row.classList.remove('deleted_row');
});
}
.deleted_row {
background-color: red;
}
<table>
<tr class="deleted_row"><td>Row</td><td>1</td></tr>
<tr class="deleted_row"><td>Row</td><td>2</td></tr>
</table>
<button onclick="removeClass()">Remove class</button>
As i can see from your question, You only want to remove particular class from all tr elements. I am assuming that, "deleted_row" class only exists in your tr element & you are assuming tbody id as your parent element. Below is jquery code for that.
$('#tbody').children().removeClass('deleted_row');
Note: It will remove "deleted_row" from all tr elements which contains that class, Not particuar tr elements.
Thanks.

Find parent for child value in DOM

I have this html-table:
<table id=mytable>
<tr>
<td>
Mark
</td>
<td>
Susan
</td>
</tr>
</table>
Somewhere from javascript an event occur and I can will be able to fetch the name, which is one of those in the table.
From javascript/jquery I need to find the td-element containing the name and color it.
I tried with:
$("#mytable").find("td:contains('Mark')").parent().css('background-color', 'red');
But the td-element doesnt get colored.
I believe you need to try this:
$("#mytable").find("td:contains('Mark')").css('background-color', 'red');
DEMO
OR
$("#mytable td:contains('Mark')").css('background-color', 'red');
DEMO
You already selected the td what you did is you tried to add a color to the tr which is the parent of the selected td:
$("#mytable").find("td:contains('Mark')").css('background-color', 'red');
that's why you example should be highlighting both td as the color applied for the tr

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')

Using querySelector() to obtain last td element

I have a variable which is a node from the dom. I've managed to get all the way down to close to where I want to be:
myvar.querySelector('.tblItinPriceSummary tr')
Gives me this:
<tr>
<td>Subtotal</td>
<td align="right">$189.00</td>
</tr>
What I want is the textContent of the second td $189.
Is there anything I can add inside of querySelector so that I can append it with .textContent to get this piece of data?
You could either use :last-child or :last-of-type to access the last td element within the parent.
document.querySelector('.tblItinPriceSummary tr td:last-child').textContent;

Jquery Finding the closest link?

I want to be able to get the href from this type of code:
<tbody>
<tr class="odd">
<td class=" sorting_1">
The Link Text
</td>
</tr>
</tbody>
but I want to be able to click on the link itself, or the td.
Here is my CoffeeScript:
$("#myID tr td").click (event)->
event.preventDefault()
link = $(event.target).find("a").attr("href")
$("#anAjaxPod").load(link)
This works if one clicks on the td, but not if if one clicks on the link.
Edit: Updated question, I used find at first. This is just the last code I played with
Use .find() ; .closest() is to climb up the DOM tree testing self and ancestors. Here anchor tag is the child of td so you need to descend down. So find or a children selector is what you need.
$(this).find("a").attr("href")
Closest get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
$("#myID tr td").click(function(event){
event.preventDefault()
link = $(this).find("a").attr("href");
$("#anAjaxPod").load(link);
});
Fiddle
.closest() looks and self or ancestors where as you want to descendent, to find the descendent use find()
link = $(event.target).find("a").attr("href")
try this:
$(function(){
$("#myID tr td").click(function(){
Link = $(this).find("a").eq(0).attr("href");
$("#anAjaxPod").load(Link);
return false;
})
})

Categories