I'm looking for a little jquery help to collapse/expand a table that I have on my site. I'd also like the table to start expanded.
Here is an example of a table I have:
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
I'd like it that when you click on the "Header" that it collapses the entire table, not just the row.
I've found the following example, but can't seem to translate it to my case.
Just write a click handler for the caption element
jQuery(function () {
$('table > caption').click(function () {
$(this).next().toggle();
})
})
Demo: Fiddle
because your table is generated dynamically, you should define a parent node in which the table is located. this parent node should always exist in the page and should NOT be generated dynamically.
<div id="table-container">
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
</div>
then bind click event on that parent node.
$("#table-container caption").on("click", function(){
$("#table-container table").css("display", "none");
});
Related
I have simple table made in jQuery:
<div id="tabs">
<ul>
<li>Al-Ar</li>
<li>Ar-D</li>
<li>E-Ha</li>
<li>Ha-J</li>
<li>K-Mo</li>
</ul>
<table class="tablica">
<tbody>
<tr class="tr1">
<td></td>
</tr>
<tr class="tr">
<td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr>
<td class="td10" colspan="4">Al..Ar</td>
</tr>
<tr>
<td class="td1">1</td>
<td class="td2">1</td>
</tr>
<tr>
<td class="td1">2</td>
<td class="td2">2</td>
</tr>
...
<tr>
<td class="td1">205</td>
<td class="td2">205</td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1">
<td></td>
</tr>
</tbody>
</table>
</div>
(On the start page only the first page of the table is displayed)
Plus script:
<script>
$('#tabs a').click(function(e) {
e.preventDefault();
var url = "./tabsContent1.php";
var urlId = $(this).attr("href");
// ajax load from href
$(".tabs-content").load(url + " " + urlId);
});
</script>
Where tabsContent1.php contains the rest of the table.
Unfortunately, the above code causes that when any element of the table is clicked, it disappears! Only the table of contents bar is visible. After clicking on any page, everything returns to normal. So this problem only appears on the first click.
An additional problem is the fact that the pages from the table (these are interactive links) appear full-screen despite the script on the main page:
<script>
<!--
onload=function(){
for(i=0;d=document.getElementsByTagName('a')[i++];){
if (d.href.match(/.*hotel\d+\.html/)){
d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
}
}
}
//-->
</script>
How to change it?
I have a list in a table that is alphabetically ordered like so.
<tbody>
<tr>
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr>
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr>
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
I use the $('table tr:has(td.hide-me)').hide() method to hide any of the elements that I don't want shown. However I also want to be able to hide the table headers if the table rows that contain normal table cells are hidden.
In the case above I would like to hide <tr><th><strong>A</strong></th></tr> because it has all of the following table rows hidden but not the the <tr><th><strong>B</strong></th></tr> because not all of the table rows are hidden.
I am relatively new to Jquery and am not sure how best implement conditional statements for a situation like this.
The first thing I did was put a class on the tr to indicate that that row contained a header. This makes it much easier to tell which rows are headers, rather than having to interrogate if they contain a th.
The second thing I did was change your hide expression for the .hide-me to find the hide me first, then find their parent trs, and hide them. This way the selector doesn't have to find the tr and check if each one has a hide me.
Then finally the logic finds all the headers, and shows them, so if any were previously hidden, they would be visible. It then filters the headers and only returns the ones that do not have any following trs that are not hidden. Havin the headers that do not have any visible following trs, it then hides them.
$('.hide-me').closest('tr').hide();
$('.header').show().filter(function(){
return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr class="header">
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr class="header">
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
</table>
I was wondering if it is possible to hide and show a row in a table by clicking a button using jquery. I know the basics of hide and show.
got this to work by using toggle and giving the tr within the table an id.
Some example of what you can do with hide and show functions of jQuery:
$(document).ready(function() {
// Hide row button click
$(".hideRowsButton").click(function() {
$(this).closest("tr").hide();
});
// Show all rows button click
$("#showRowsButton").click(function() {
// Selects every hidden row of the table
$("#myTable tr:hidden").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
<tr>
<td>Steve</td>
<td>55</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
</tbody>
</table>
<br/>
<button type="button" id="showRowsButton">Show all rows</button>
If you need something specific, fleel free to ask.
I'm not sure what exactly you would like to do, but if we consider for instance the following html code:
<table>
<tr>
<th>col11</th>
<th>col12</th>
<th>col13</th>
</tr>
<tr>
<td>col21</td>
<td>col22</td>
<td>col23</td>
</tr>
<tr>
<td>col31</td>
<td>col32</td>
<td>col33</td>
</tr>
</table>
then you can just write:
$("table tr:nth-child(2)").hide();
or
$("table tr:nth-child(2)").show();
where 2 is the 2nd row. You can change it accordingly:
https://jsfiddle.net/gebf2pf2/2/
I'm a bit limited in being able to get what I want and I am hoping maybe there is a way to do this, either with CSS (which I doubt) or javascript.
I have a table as seen below where drupal will assign the link an "active" class. This is great, but I would like to change the CSS of the entire row that the active link is in and I just can't automate that with drupal. Is there anyway to see which page the user is on and then add a class or id to the row (tr) that has the current link?
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>
To add a class to the row based on the active anchor, you could use closest() (if using jQuery), and just style the class you decide to give that row with CSS.
$(function() {
$('.views-table a.active').closest('tr').addClass('active_row');
});
CSS
.active_row {color: green; height: 300px;}
<script src="/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td.views-field a.active').css("color","900");
});
</script>
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>
hope this helps
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO