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);
})
})
Related
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());
});
I need table be collapsed except one row being clicked. And the code below does the job:
html:
<table border="0">
<tr><td>This is row number</td><td>1</td></tr>
<tr><td>This is row number</td><td>2</td></tr>
<tr><td>This is row number</td><td>3</td></tr>
<tr><td>This is row number</td><td>4</td></tr>
<tr><td>This is row number</td><td>5</td></tr>
</table>
jQuery:
$("tr").click(function () {
$("tr").not(this).slideToggle();
});
Once visible is only one row would like to expand table back on mouseover and this is also easy by:
$("tr").mouseover(function(){
$("tr").show();
});
So now, how to make table to be collapsed back on mouseout leaving same row visible ?
http://jsfiddle.net/GbRAZ/201/
Will appreciate for any suggestions.
You should add a class to the active row and use that to determine what to show/hide
$("tr").click(function () {
$(this)
.addClass('active')
.siblings()
.removeClass('active')
.slideToggle();
});
$(".header").mouseover(function(){
$("tr").show();
}).mouseout(function(){
$('tr:not(.active)').hide();
});
Thanks to #gaby-aka-g-petrioli code work perfect, just changing tr to table in $("table").mouseover(function() allows me to change selected row.
Thank you.
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...
How to hide All rows except current (clicked Row) using jQuery?
I want to hide all rows when i click the particular row except current one row.
<table>
#foreach (var item in Model)
{
idValue++;
<tr class="tableRow" id="#idValue">
<td class="master" id="#item.Batch_Seq">
<a href= "#" >#(item.Batch_Name)></a>
</td>
<td>
#(item.Present)
</td>
<td>
#(item.Absent)
</td>
<td>
#(item.HalfDay)
</td>
<td>
#(item.Batch_count)
</td>
</tr>
}
</table>
I tried like this
$('.tableRow').hide();
$(this).closest('tr:not(.tableRow)').hide();
Could anyone help me?
You seem to want this :
$('.tableRow').click(function(){
$('.tableRow').hide(); // hide all rows
$(this).show(); // show the clicked one
});
Note that the user can't notice the row was hidden then shown : the screen isn't repaint until the event handler ends.
Use .not() to select all elements with class tableRow except for the one that was clicked(this)
$('tr.tableRow').click(function() {
$('tr.tableRow').not(this).hide();
});
You can use not() to hide everything that isn't "this":
$('table tr.tableRow').click(function(){
$('table tr').not(this).hide(); // hide everything that isn't "this"
});
or you can use .siblings() to hide the siblings of the clicked row
$('table tr').click(function(){
$(this).siblings().hide(); // hide the siblings of the clicked row
});
Working example : http://jsfiddle.net/ouadie/U7eUR/
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' )