I have a bootstrap table with expandable rows, what I want is, opening the page with an already expanded row (say first row).
Below is the table I am using.
<table class="table no-padding-table">
<thead>
<tr>
<th>Date</th>
<th>Date2</th>
<th>Date3</th>
</tr>
<tbody>
<tr data-toggle="collapse" data-target="#extend{{$index}}"
ng-repeat-start="date in dates">
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
</tr>
<tr ng-repeat-end="">
<td colspan="3" class="hiddenRow">
<div class="accordian-body collapse">
TEST
</div>
</td>
</tr>
</tbody>
Related
Info: I want to make nested draggable table using sortable js. This is like a tree table.
The .detail-view tr is a child of previous tr or which have Parent data. I want If user Drag the parent tr the child(.detail-view) also dragged along with it. each parent tr have there separate zone with there child table.
The childs are not shared able with other childs or parents.
https://jsfiddle.net/47r95hbs/
<table class="table" id="mytable">
<thead>
<tr>
<th>Sortable Table</th>
</tr>
</thead>
<tbody id="ptable">
<tr>
<td>Parent subject 1</td>
</tr>
<tr class="detail-view" data-subject="1">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 1 child</td>
</tr>
<tr data-id="2">
<td>Subject 1 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 2</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 2 child</td>
</tr>
<tr data-id="2">
<td>Subject 2 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 3</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 3 child</td>
</tr>
<tr data-id="2">
<td>Subject 3 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
I have a table in a web page with Bootstrap. This table has rows that I want to expand/collapse. It is intended to act like a hierarchy. You can see the table in this Bootply. You can see that it successfully expands / collapses the "grandparent" content. However, it doesn't expand/collapse each "parent" element's content as needed.
How do I expand / collapse the child rows in this table? Here is my HTML:
<div class="list-group-item" id="grandparent">
<div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child X</td>
<td>04/10/2017</td>
<td>04/11/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is working example with based on classes Demo
This will show all matched childs.
Demo
You must add the data-target="#collapseContent1" data-toggle="collapse" attributes to Parent 1 and Parent 2 just like you have done it for Grandparent.
And then give the id to target.
<div class="list-group-item" id="grandparent">
<div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr >
<td data-target="#collapseContent1" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse" id="collapseContent1" aria-expanded="true">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr>
<td data-target="#collapseContent2" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse" id="collapseContent2" aria-expanded="true">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
But you won't get animation for tr elements.
This appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. But if you are still looking for a workaround here is a demo that might help:
DEMO
I created a 3 Level Accordion. It almost works fine... But if the 3rd level is collapsed and i try to uncollapse(?) the 1st level, my 2nd level items will get invisible and my 3rd level items are still visible
Here the code:
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
<th>Debit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
</tr>
<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td>
</tr>
<tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
<td>2</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$11.00</td>
<td class="text-error"></td>
<td class="text-success">$161.00</td>
</tr>
<tr data-toggle="collapse" data-target="#demo21" class="accordion-toggle">
<td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo21"> Demo21 </div> </td>
</tr>
</tbody>
JSFiddle Example
Would be nice if someone has an idea.
Thank you :)
its because your data-target="#demo1" which is pointed so when u click the target it will check the demo1 id but the second option is outside of the div so it wont close the div so u have to change the structure u have to move the 3 level inside the demo1 id.
<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td>
</tr>
change to
<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle">
<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1
<div>
<div colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 tytjtyty</div> </div>
</div>
</div> </td>
</tr>
for refrence https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=preview
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});