Scrolling in a jQuery constructed table
Hello:
My application has a jQuery constructed table, that works quite well. But... I can't get the <tbody to scroll. No matter what I do. Whether I use CSS or inline styling, the scrolling doesn't work. And I'm wondering if it's not picking up max-height and scroll settings because the table is constructed with jQuery. You can see how the table is constructed in this
thread. Following are the applicable scripts:
HTML table w/inline styling:
- <table id="GroupList" class="layout">
- <tbody style="background:yellow; overflow-y: scroll; overflow-x: hidden; max-height: 100px;"></tbody>
- </table>
The table is picking up the background setting, because the table body is yellow: But... the table does not pick up the max-height setting, nor does it pick up the overflow settings.
Following is the jQuery used to build the table:
rowBuilder(data) function
-
function rowBuilder(data) {
-
return '<tr>'
-
+ '<td class="b_lay">'
-
+ data.GroupName
-
+ '</td>'
-
+ '<td>'
-
+ data.Grp_CreateDate
-
+ '</td>'
-
+ '<td>'
-
+ '<button type="button" class="toggle_Bttn" value=' + data.GroupID + '>Members</button>'
-
+ '</tr>';
-
}
$('#new_OrgGrp_Save').click(function()
-
$('#new_OrgGrp_Save').click(function() {
-
var NewOrgGrp = $('#new_OrgGrp').val();
-
$('#new_OrgGrp').val("");
-
$.post("org_users_data4.php",{bind_NewGrp:NewOrgGrp},function(data){
-
$("#GroupList > tbody").empty();
-
$('#GroupList').append(HeaderRow);
-
$.getJSON("org_users_data4.php", function(data) {
-
$.each(data, function(i, val) {
-
$('#GroupList').append(rowBuilder(val)); //======== See custom.functions.js for rowBuilder() ============
-
});
-
});
-
});
-
});
So... is it possible that the construction process is interfering with the <tbody> ability to pick up overflow and max-height settings????
Any insight from folks here would be greatly appreciated.
Thanks Much:
Pavilion