I have a main page which has a div with the id of displayTable
. In that a table GETs loaded through AJAX from another php page.
The table is laid out like this:
<div class="table-responsive">
<table class="table table-bordered table table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Blah Blah</td>
<td>Blah Blah</td>
<td>Blah Blah</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>Dilbert</td>
<td>Rob</td>
<td>Blah</td>
<td>Blah</td>
<td>Blah Blah Blah</td>
</tr>
</tbody>
</table>
</div>
I am attempting at using this jquery code to make the first tr
fixed. So, in the example above, Dilbert and Name would be fixed and the rest is scrollable. However, I cannot seem to get to the table and it doesn't seem to affect it or do anything.
var $table = $('#displayTable .table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('my-sticky-col');
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
Aucun commentaire:
Enregistrer un commentaire