Develop Reference

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());
});

Extend/collapse table except one row

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.

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 dynamic insert row for expand/collapse

I have a table structure as follows;
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 2</div></td>
</tr>
Now on click of the icon image (chevron), I want the details row to be displayed immediately below the clicked row (It should be a tr containing child table). This should be inserted/appended dynamically on click of any of the list row.
How do I do this using jQuery? Any examples for reference would be really helpful..

the following example creates a new tr (if does not exists) containing table element under the tr where the clicked icon exists.
function createChildTable(string)
{
return $('<table>').append(
$('<tr>').append(
$('<td>').append(string)
)
);
}
$('.icon-chevron-right').click(function() {
var details = $(this).closest('tr').next('tr.details');
if (details.length) details.show();
else {
// first time clicked
details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
$(this).closest('tr').after(details);
}
});
Example Link

I'd say there are two main ways to do this, and you'll have to figure out which one is best for you; it depends.
What you're talking about is ADDING a row into the DOM. This is fine in some cases, it depends on what this collapsed row is used for. If you want to be able to remove the collapsed row and add it again, it could make your life difficult if you have to reconstruct all the inner HTML via JavaScript every time.
var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';
$('.icon-chevron-right').click(function() {
$('.collapse').remove(); // Deletes all rows that has class "collapse"
collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what's stored in collapseHTML after "this closest tr"
});
Then, as someone else said, you can solve this by adding those rows from the get go like so:
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr class="collapse">
<td colspan="2">This is my new row</td>
</tr>
Then, your css should loook something like this:
.collapse {
display: none;
}
.collapse.active {
display: block;
}
This means that when you add the active class to the collapse row, it goes from display: none; to display: block;. This you do via JavaScript/jQuery:
$('.icon-chevron-right').click(function() {
$('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
$(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row)
});
Hope this helps!

Toggle selected elemens class

I have a dynamically loaded table with the following tr's:
<tr>
<td><span class="active">Task Name</span><br /><span class="icons_small">U</span><span class="contact_name tiny">Contact Name</span><span class="user_number tiny">(111111)</span><span class="icons_small" style="visibility:hidden;">!</span></td>
<td><span class="date_assigned">13/12/2012</span><br /> <div id="progressbar"></div></td>
<td class="icons_small"><span class="flag_task">f</span></td>
<td class="icons_small"><span class="set_reminder">A</span></td>
<td><span class="warning tiny" style="visibility:hidden;">Delete</span></td>
</tr>
Im trying to set the td with the spanclass "flag_task" (3rd td down) to toggleclass an additonal class, but only on the selected td with the spanclass "flag_task, not all instances of that class. This is what im currently using:
<script>
$(document).ajaxSuccess(function () {
$(".flag_task").click(function () {
$(".flag_task").toggleClass("warning");
});
});
</script>
Could someone please clarify how to effect only the selected instance.
Thanks,
Mark

In this section of the code, you're saying "grab all elements with a class of flag_task" instead of just "grab the clicked element."
$(".flag_task").click(function () {
$(".flag_task").toggleClass("warning");
});
So, to fix this issue, you just have to select the element that was clicked on.
This line:
$(".flag_task").toggleClass("warning");
Can be changed to:
$(this).toggleClass("warning");
Check out Understanding the "this" keyword