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.
Related
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 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...
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");
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!
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/