Develop Reference

Hiding table header if table rows until next table header are hidden

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>

footable js removes all form elements in the table

I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.
<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th></th>
<th data-breakpoints="xs">Date Created</th>
<th>Source</th>
<th>Type</th>
<th data-breakpoints="xs">Status</th>
<th data-breakpoints="xs sm"> </th>
<th data-breakpoints="xs sm md" > </th>
<th data-breakpoints="xs sm md"> </th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td></td>
<td>6/11/16</td>
<td>Mr. Cooper - Request Info</td>
<td>Buying</td>
<td>
<select class="nobrdr">
<option>Offer</option>
</select>
</td>
<td><input type="text" class="nobrdr" placeholder="Value"/></td>
<td><input type="text" class="nobrdr" placeholder="Date" /></td>
<td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
</tr>
</tbody>
</table>
jquery function :
$(function($){
$('#accordion-example-1,#accordion-example-2').footable({
});
});

You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.
For example in your case:
<th data-type="html" data-breakpoints="xs">Status</th>
will tell it to respect HTML markup within any cells in the Status column.
The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.
For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.

Angular table loading spinner on table columns visibility change

I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>

CSS div tag inherit dimensions from table rows

I am not such an expert in CSS;
My question is: can a div tag inherit dimensions from a table rows based on table row's class or id?
For example: We have a table with a couple of rows, but we don't know exact size of one table row, but we know the id/class of the rows. And by absolute positioning a div tag on table based on id/class to fill up 2 rows from start to end!
Can anyone point me to some addresses or to give me a tip code?
<table>
<col width="9%">
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
I search for something like this:

You can take the width and height of parent td and then set them to the div using javascript.You want something like this?
https://jsfiddle.net/toLacq32/1/
$(document).ready(function(){
tdWidth = $('#inner-div').closest('td').width();
tdHeight = $('#inner-div').closest('td').height();
$("#inner-div").width( tdWidth ).height(tdHeight);
});

change the class of a specific tag

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