Expand / Collapse HTML Tables - javascript

I have an HTML table which is generated dynamically from server.
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
Can you help me or provide any info on how can I do this?

Ok I think the question is too vague to be answered completely if you think about.
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomas comment.
If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
That said here is a quick and dirty example of what your approach should be like.
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
I can update the answer with a better more personalized answer if you update your question.
But if you want to build it yourself, this are some of this could come in handy:
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
And many other depending on your approach.
Good luck!

Here is a quick example, I hope It helps if I understood your question correctly.
With this structure:
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});

An accordion is a simple, elegant solution: javascript and css.
This fiddle is from the W3Schools explanation above.

Related

angularjs ng-repeat and create two tr

Im creating a toggable element. Im in need to create two tr`s for each ng-repeat.
i want the result below, when clicking the first tr, then it will show the second.
How can i create two tr-`s for each ng-repeat without making multiple tables?
// repeat start
<tr class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<td><div >some info here</div></td>
<td><div >info</div></td>
<td><div >something here </div></td>
<td><div >49</div></td>
</tr>
<tr class="my toggable element">
<td colspan="4>
<div>some info from the ng-repeat here too.
</div>
</td>
</tr>
// first repeat done
EDIT:
i could make ng-repeat in the tbody, but then i get multiple tbodys, and i dont want that neither :|
Something Like this
<table>
<tr ng-repeat-start="item in items">
<td>am there</td>
</tr>
<tr ng-repeat-end>
<td>am there too</td>
</tr>
</table>
Here is the example
Use an HTML5 parent, like tbody, and use the ng-repeat over it:
<tbody class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<tr>
<td>some info here</td>
</tr>
<tr>
<td>some other info here</td>
</tr>
</tbody>
This way, you'll end with two tr for each iteration of ng-repeat.
Edit
OP has asked to not use multiple tbody, so this isn't the answer he wanted. Nevertheless, this should be useful anyway to someone who has not those needings.

How to replace between existing table rows in JavaScript

I am trying to regenerate a table with a new order, the problem i encounter is in the performance,
I Have something like this:
<table>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
</table>
Obviously my table is much more complex, but what i would like is a solution with good performance for a replacing command
my target table should be something like:
<table id="mainTable">
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
</table>
When I redraw it the performance is bad(for more then 100 lines)
is there any way to just replace the rows between themselves without redrawing it?
Thanks
For rearranging them append them using append() or next()
$table = $('#mainTable');
$table.append($('#row1,#row2', $table));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mainTable">
<tr id="row1">
<td>1</td>
</tr>
<tr id="row2">
<td>2</td>
</tr>
<tr id="row3">
<td>3</td>
</tr>
<tr id="row4">
<td>4</td>
</tr>
</table>
The basic sultion is using jquery "after" function , which move the target element after the wanted element ..
$("#row1").after("#row4");
or if you want to sort the table based on its values , you can use plugins like : table sorter

Cheerio.js and working with subsets of the dom

I've having some issues (probably misunderstanding soemthing most likely) when reading the dom and using cheerio.js to do so from with a simple node.js app.
I'm using request to grab the html from a website and cheerio to navigate it find certain portions.
As and example the html looks like this....
<html>
<body>
<table>
<tr><td class="title"/>Title 1</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name1</td>
</tr>
</table>
<td>
</tr>
<tr><td class="title"/>Title 2</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name2</td>
</tr>
</table>
<td>
</tr>
<tr><td class="title"/>Title 3</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name3</td>
</tr>
</table>
<td>
</tr>
</table>
</body>
</html>
What want to do it find all instances of the td with class title
grab the title text and thne for each one of those then grab the name at the td with class dl.
So far
$('td[class=title]')
will get me all the td with that class and using the each function
$('td[class=title]').each(function(i, elem)
lets me grab the text from each but I want to grab the title then the next td with the dl class before moving on to the next title.
I guess what I'm really asking is can I get that td.dl element while in the
$('td[class=title]'.each function?
Yes you can:
.each(function(){
$(this).parent().next().find('td.d1').text()
})

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you
You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length
$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length
i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')
try this, this is more helpfull for you
Demo Here

how to show/hide a div while performing onclick on a td element

I am trying to hide/show a div while clicking <td> in a table. Table contains two <div>s, and consider while clicking main account holder <td> that the first div should be displayed and the other div is in hidden condition. For authorized reorder, <td>, the respective div should display.
My HTML is
<div id="authreport">
<table width="270">
<tr>
<td>First name:</td>
</tr>
<tr>
<td>Last name:</td>
</tr>
<tr>
<td>Mobile phone:</td>
</tr>
<tr>
<td>Email:</td><td>
<tr>
<td>Password:</td>
</tr>
</table>
</div>
<div id="mainacc">
<table>
<tr>
<td colspan="2"><h3>Work details</h3></td>
</tr>
<tr>
<td>Organisation:</td>
</tr>
<tr>
<td>Industry Type:</td>
<tr>
<td>Street:</td>
</tr>
<tr>
<td>Postcode:</td>
</tr>
<tr>
<td>Country:</td>
</tr>
</table>
</div>
My JavaScript is
function authorised_reporter(auth){
var button = document.getElementById('auth')
auth.onclick = function() {
var div = document.getElementById('authreport');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
} }
};
Can any one give me an idea of how to do this?
You should keep an eye on this great tutorial page :
http://www.w3schools.com/jquery/jquery_hide_show.asp.
W3School is a great tutorial site (the best from my point of view), and this page show you an example using the JQuery Framework which is "A MUST HAVE INCLUDED" source in your page because it gives very good helper for common (and more complex) Javascript functions.
http://jquery.com/
.Best Regards
If you use JQuery it is very simple.
$('#DivID').click(function(){
//You can use show(), hide(), or toggle()
$('#DivID').toggle();
});
http://api.jquery.com/toggle/
http://api.jquery.com/show/
http://api.jquery.com/hide/
If you browse through the jquery API there are a lot of effects you can use like fadeout and stuff.
If I understand you correctly, what you're trying to achieve is like accordion. You might wanna see this.
http://jqueryui.com/accordion/

Categories