Traversing table elements in jQuery - javascript

I have a table structure as :
<table id = "cust-id">
<tr>
<td> 1</td>
<td id = "specific_id_re">link tag</td>
</tr>
<tr>
<td> 2 </td>
<td id = "specific_id"> link tag</td>
</tr>
</table>
I am trying to use jquery to access each of the table row columns that have an id and a link tag, but I am falling short. The best I have been doing is:
$('#cust-id').children().children().children() ; // to get access to the td elements ?
Any suggestions on what I should read or how I ought to approach this ?
Thanks
Parijat Kalia

$('#cust-id td[id] a').each(function () {
var td = $(this).closest('td');
// do what you want
});

Try this
$("#cust-id tr:has(td[id] a)");

You can use the following selector $('#cust-id td[id]') this will return all td elements that has id attribute.

$('#cust-id td')
will gather all the td elements under the element with #cust-id. You can chain the selectors the same as in regular CSS.
If you want the row parents of a <td> you can traverse back up from the <td> using
$('#cust-id td').closest('tr')
Ah, you actually want just those <td> that have <a> and an id, so...
$('#cust-id td[id] a').closest('td')

This selects all TD elements that are in the 2. column:
$( 'td:nth-child(2)', '#cust-id' )
This selects all TD elements that have an "id" attribute:
$( 'td[id]', '#cust-id' )
This selects all TD elements that contain a <a> element:
$( 'td:has(a)', '#cust-id' )
So, if you combine those approaches, you can select those TD element that (1) have an "id" attribute, and (2) contain a <a> element:
$( 'td[id]:has(a)', '#cust-id' )

Related

How to select the text of respective table data separately under table row with jQuery

This is the code
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
I want to select data of ID c1 under < tr > tag.
I am using this jQuery code but it is selecting whole text under < tr > tag.
$("#table-body").on('click','tr',function(e){
e.preventDefault();
console.log($(this).text());
})
I am getting AAA02% as the output if this code.
I want to select AAA0 and 2 separately.
How to do it ?
Since there is more than one td element in each clicked tr element, you have to loop through each of them to get the text individually.
You can use find() and each() like the following way:
$("#table-body").on('click','tr',function(e){
$(this).find('td').each(function(){
console.log($(this).text());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
</table>
Try this:
console.log($(this).find('.c1').text());
And use class attribute instead of id
You are getting all text inside tr because you are binding click event on the tr and so $(this) refers to thetr you clicked.
To get AAA0 only, you can use children() and pass id to select a specific td
$("#table-body").on('click','tr',function(e){
console.log($(this).children('#c1').text());
});
But since you are assinginig id to the td's, you can also directly attach the click event to the td as
$("#table-body #c1").on('click','tr',function(e){
console.log($(this).text());
});

How can I select and count all <td> elements in a table

I have a table, suppose I click on a button with id #mybutton.
For example:
<table></table>
<button id="mybutton"></button>
I want an alert message with the total number of <td> elements and select all <td>s in the table.
Please try:
$('table').find('td').addClass('selected');
Here, with class "selected" you can write your CSS for select.
Total number of td in the table:
$('table').find('td').length;
Try this
assuming that your table has id "mytable", you can use
$(function(){
$("#mybutton").on('click', function(){
alert($("#mytable tr td" ).length);
})
})

how to remove a TR which have a TD that contain specific text

I have the following markup which have SPAN >> Table >> TR >> TD:-
now i want to specify either using css or jquery to remove the TR which have a TD that contain the word "Question" inside <nobr> tag. so can anyone adivce how i can do so ? thanks
You can use filter to compare the exact text of the <nobr> element, then remove the closest <tr>
$("span table tr td nobr").filter(function() {
return $(this).text() === "Question";
}).closest("tr").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
<table>
<tr>
<td>
<h3>
<nobr>Question</nobr>
</h3>
</td>
</tr>
<tr>
<td>
Untouched
</td>
</tr>
</table>
</span>
Try to use :has() selector along with :contains() selecor to achieve what you want,
$("tr:has(td nobr:contains('Question'))").remove();
DEMO
You can do it with jQuery as shown below:
$(document).ready(function(){
$('td').each(function(){
if($(this).find('nobr').text() === 'Question') {
$(this).closest('tr').remove();
}
});
});
It would have been helpful if you could provide HTML. I would have created fiddle but You can try below solution
Iterate tr in table and find the tr having
$("table.ms-formtable > tbody > tr").each(function(){
var text = $(this).find("td:first").find("nobr").text();
if(text === 'Question') {
$(this).remove();
}
});
http://jsfiddle.net/9tw2kfek/

Traversing on each span under table > tr > td > div

How to traverse on each span under table > tr > td > div ?
I would like to hide those span elements once click on the anchor tag that beneath the same tr level.
JSFiddle
$(document).ready(function() {
$(".hide").click(function(){
$('#table td div span').each(function(){
var $span = $(this);
$(this).siblings().hide();
var spanattr = $span.attr('class');
alert(spanattr);
});
});
});
HTML:
<table id="table">
<tbody>
<tr>
<td class="tdspan">
<div class="container">
<span class="spanelem">First</span>
</div>
</td>
<td class="tdspan">
<div class="container">
<span class="spanelem">Second</span>
</div>
</td>
<td class="tdspan">
<div class="container">
<span class="spanelem">3rd</span>
</div>
</td>
<td>
Hide
</td>
</tr>
</tbody>
<br>
</table>
<span id="text"></span>
I already searched for other questions and used the provided solution such as below link but I'm not able to figure it out.
jquery to traverse the div and get its span details
You don't need for loops there.
Simply .find() span with class .spanelem in a closest <tr> parent of the clicked element:
$(".hide").click(function(){
$(this).closest('tr').find('.spanelem').hide();
// Or using selector context (.find() equivalent but a bit shorter)
// $('.spanelem', $(this).closest('tr')).hide();
});
JSFiddle JSFiddle
References:
.closest()
.find()
selector context
Are you just trying to hide the spans themselves? You are hiding their siblings, and since they are the only children of their parent div, there is nothing else to hide. If you want to hide the spans themselves, then just change
$(this).siblings().hide();
to
$(this).hide();
If you have multiple rows, then you can just crawl up the tree from the .hide button that was clicked to its ancestor row, then find all the spans within that row. You may want to search on a particular class, or all spans, but I don't know for sure how you identify which elements you want to hide.
Something like
$(this).closest('tr').find('span').each(function() {
Updated JSFiddle here: https://jsfiddle.net/fk9jgrLx/4/
If your table structure is as in provided example, and if you will have multiple rows:
$(document).ready(function() {
$(".hide").click(function(){
$(this).parent().siblings().find('span').hide();
});
});
https://jsfiddle.net/L1j9psz6/1/ - remove all spans from row...

jQuery- How to select a element with class name from a list of elements

I am using jQuery.
I want to select a cell from a table.
So I tried the following codes.
// First line works fine for me. I can get a list of columns at the correct target row.
var targetColumns = $(elemClicked).closest("tr").find("td");
// I want to get the cell with the class named "draftstatus". This line has problem. I cannot get what I want.
var targetCell = columnsAtTargetRow.$(".draftstatus");
The targetColumns inspected from browser looks like the following:
The 5th td above is my target cell.
I also try to use find() function. It won't work either because find() will start from next children level.
columnsAtTargetRow.find(".draftstatus"); // this does not work.
What functions should I used to get that cell within that "list of td".
Thanks in advance.
You just need to figure out which selectors to use.
var targetColumns = $(elemClicked).closest("tr").find("td");
this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");
If the elemClicked is a td, then you can just use siblings(".draftstatus");
Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.
$(function(){
//reference all cells with myclass class using filter
$("#table1 tbody td").filter(".myclass").addClass("red");
// click events for all tds reference the .target class cell using siblings
$("#table1 tbody td").on("click",function(e){
$(this).siblings(".target").toggleClass("red");
});
//items inside a table cell click event
$("#table1 tbody td a").on("click",function(e){
//toggle bold class
$(this).closest("td").siblings(".target").toggleClass("bold");
//prevent event from bubbling up
e.stopPropagation();
});
})
.red {
background-color:red;
}
.bold { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
</tbody>
</table>
This is incorrect:
columnsAtTargetRow.$(".myclass");
This should be:
columnsAtTargetRow.find(".myclass");

Categories

Resources