Develop Reference

hide() and show() causes page to jump sporadically

I have a table which is populated with details of jobs a user is looking for. The structure is akin to this:
<div class="container">
<table class="table-responsive table-hover table-bordered col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1" id="resultsTable" border="0" cellspacing="0" cellpadding="0"><tbody>
<tr class="selectable selected">
<td class="summary">A Summary</td>
</tr>
<tr>
<td class="detail" id="32113607" style="display: table-cell;">This is some detail</td>
</tr>
<!-- And so on ....................... -->
</tbody></table>
</div>
I then have a function that handles the expand and retraction of the table rows.
$(function () {
//When clicking a row in the table, hide the other rows...
$("#resultsTable").on('click', '.selectable', function (e) {
$(this).addClass('selected').siblings().removeClass('selected');
$(this).siblings().children("td.detail").slideUp();
$(this).next("tr").children("td.detail").slideDown();
});
});
There's also some basic CSS, but nothing major. This is all in a fiddle here: http://jsfiddle.net/v9ec3/1176/
The strange thing is, if you start at the bottom and work upwards, it doesn't have any problems. If you start at the top and work down, it will jump partway through one of the records.
Having stepped through this in the dev tools, it looks like jQuery is trying to help in moving to offset the slide.
I have tried:
e.preventDefault()
e.stopPropogation()
setting width/height
setting overflow-y
animations (i.e. going to id x)
CSS transitions

Thanks to Kevin B's link (which I hadn't found previously), I was able to work out what was required to keep the elements in place:
$("#resultsTable").on('click', '.selectable', function (e) {
var prevSelectedHeight = $(".selectable.selected ").next("tr").height();
var currentScrollTop = $(window).scrollTop();
$(this).addClass('selected').siblings().removeClass('selected');
$(this).siblings().children("td.detail").hide();
if (currentScrollTop > prevSelectedHeight) {
$(window).scrollTop(currentScrollTop - prevSelectedHeight)
}
$(this).next("tr").children("td.detail").slideDown();
});
This now works for most cases. There are a few edge cases where the page is scrolled to the bottom, and the elements shuffle upwards. However, for the vast majority of items in the list, it is working well.

Column toggle not working when append the table rows dynamically

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).

Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog

You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");

Jquery table: customize seanmacisaac table / insert tbody into div

I am trying to adjust a Jquery sort-able, searchable table set up by seanmacisaac
Ref: http://www.seanjmacisaac.com/projects/code/tablesort/#index-member-4
How do I set the tbody height to a fixed value. Also allowing vertical scroll (overflow-y)?
<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr><th class="table-sort">head1</th><th class="table-sort">head2</th><th class="table-sort">head3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
</tbody>
</table>

Just wrap the table into a div :
<div style="overflow:auto;height:500px;width:100%">
<table></table> // with any number of row
</div>
Put the css into a class and add a class to the container div

If you want to scroll only the data section of the table not with headers then you should make html like:
<div class="header-table" style="width:100%">
<table class="header"></table>
</div>
<div class="table-data" style="overflow:auto;height:500px;width:100%">
<table class="data"></table>
</div>

If you want to keep the header fixed while scrolling, for simple tables, I create a two separate tables:
the first for the header and the second in a div with fixed height and overflow-y:auto, just for the tbody.
Not that elegant but just do the job.
Don't know where this table will be but I think you should use a paginator for 100+ rows tables...
If the problem is sorting data and paginate I'd give jqGrid a chance: http://trirand.com/blog/jqgrid/jqgrid.html

Resizing table columns, that can be hidden

I have a standard table with option to hide columns and I want to use a plugin for re-sizing the width of the columns.
I tried with colResizable and resizableColumns but the things get messy when I hide a column and then try re-sizing.
Edit: My table:
<table id="mytable">
<thead>
<tr><th class="column1"></th>text 1 <th class="column2">text 2</th></tr>
</thead>
<tbody>
<tr><td class="column1"> cell00 </td> <td class="column2"> cell01 </td></tr>
<tr><td class="column1"> cell10 </td> <td class="column2"> cell11 </td></tr>
<tr><td class="column1"> cell20 </td> <td class="column2"> cell21 </td></tr>
</tbody>
</table>
Activating colResizable:
$("#mytable").colResizable({
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
Function for hidding / displaying columns:
function toggleColumn(index){
if(something){
$('.column'+index).hide();
}else{
$('.column'+index).show();
}
$("#"+tableID).colResizable({
disable:true
});
$("#"+tableID).colResizable({
disable:false,
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
}
After each toggle i restart colResizable, so it can get the new values.
The problem comes when I re-size any columns beyond the hidden ones.
I also need the option to set default widths to each column. All suggestions are welcomed.

colResizable 1.5 is compatible with hidden columns. You can download it on http://www.bacubacu.com/colresizable
if you want to change column visibility after colResizable is already activated, those are the steps you have to follow:
call colResizable (as usual)
before you perform any DOM modifications (such as hiding a column), destroy colresizable using disable:true
change columns visibility
call colResizable again

It looks like Datatables has everything you may want.
Check out this fiddle. You get everything: Show, hide columns, resized columns, and many more cool options. And using it is very easy
$(document).ready( function () {
$('#example').dataTable( {
"option": value;
} );
} );

option 1:
Use a class name on the TD. Give the class name in a style element that is added dynamically to the document. To resize, delete the style element from the document then add again with new specifics.
option 2:
Cycle through the rows collection of the table setting style.width on .cells[0], .cells[1], ....
To hide, set style.display to none, then to unhide, inline.

HTML table with fixed headers and a fixed column?

Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.
I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.
If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.

Working example of link posted by pranav:
http://jsbin.com/nolanole/1/edit?html,js,output
FYI: Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2. Not screen-reader-friendly (headers aren't part of content table).
EDIT 5/5/14: moved example to jsBin. This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).

The jQuery DataTables plug-in is one excellent way to achieve excel-like fixed column(s) and headers.
Note the examples section of the site and the "extras".
http://datatables.net/examples/
http://datatables.net/extras/
The "Extras" section has tools for fixed columns and fixed headers.
Fixed Columns
http://datatables.net/extras/fixedcolumns/
(I believe the example on this page is the one most appropriate for your question.)
Fixed Header
http://datatables.net/extras/fixedheader/
(Includes an example with a full page spreadsheet style layout: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)

I see this, although an old question, is a pretty good place to plug my own script:
http://code.google.com/p/js-scroll-table-header/
It just works with no configuration and is really easy to setup.

If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a <tbody> styled with "overflow-y: auto" like this:
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
If the <tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.

In this answer there is also the best answer I found to your question:
HTML table with fixed headers?
and based on pure CSS.

I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in Scrollable Table. Please let me your suggestions.
Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)

<script>
$(document).ready(function () {
$("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
$("#GridHeader table tbody .rows").remove();
$('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
<div id="GridHeader">
<table></table>
</div>
<div style="overflow: auto; height:400px;">
<asp:GridView ID="GridView1" runat="server" />
</div>

Not quite perfect, but it got me closer than some of the top answers here.
Two different tables, one with the header, and the other, wrapped with a div with the content
<table>
<thead>
<tr><th>Stuff</th><th>Second Stuff</th></tr>
</thead>
</table>
<div style="height: 600px; overflow: auto;">
<table>
<tbody>
//Table
</tbody>
</table>
</div>

I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).

The first column has a scrollbar on the cell right below the headers
<table>
<thead>
<th> Header 1</th>
<th> Header 2</th>
<th> Header 3</th>
</thead>
<tbody>
<tr>
<td>
<div style="width: 50; height:30; overflow-y: scroll">
Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk
fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
</div>
</td>
<td>
Hello world
</td>
<td> Hello world2
</tr>
</tbody>
</table>

YUI DataTable
I don't know if YUI DT has this feature but I won't be surprised if it does.

Here is a good jQuery plugin, working in all browsers!
You have a fixed header table without fixing its width.
Check it: https://github.com/benjaminleouzon/tablefixedheader
Disclaimer: I am the author of the plugin.