jquery - 从 json 动态加载数据时，克隆表标题列宽和原始 tbody 列宽未对齐

Question

我正在使用 html、jQuery、JSON 并遇到了以下需要卡住表头的任务。我已经尝试了很多插件来卡住标题，但问题是当 tbody 通过 jQuery 中的 ajax 调用填充 json 数据时，克隆表标题的宽度和 tbody 中列的原始宽度未对齐。我在下面发布代码，请有人告诉我哪里出错了。

HTML 部分:

<div style="width:300px">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>                
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>

使用的 CSS 样式:

#tblNeedsScrolling {
font-weight: normal;
text-align: center;
border-collapse: collapse;
}
#tblNeedsScrolling td, #tblNeedsScrolling th {
width:50px;
    font-size: 11px;
    border: 1px solid #B9B9B9;
    padding: 3px 7px 2px 7px;
}
#tblNeedsScrolling th {
width:50px;
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
}
#tblNeedsScrolling tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}

jQuery 脚本:

function scrolify(tblAsJQueryObject, height) {
    var oTbl = tblAsJQueryObject;
    var oTblDiv = $("<div/>");
    oTblDiv.css('height', height);
    oTblDiv.css('overflow', 'scroll');
    oTbl.wrap(oTblDiv);
    // save original width
    oTbl.attr("data-item-original-width", oTbl.width());
    oTbl.find('thead tr td').each(function() {
        $(this).attr("data-item-original-width", $(this).width());
    });
    oTbl.find('tbody tr:eq(0) td').each(function() {
        $(this).attr("data-item-original-width", $(this).width());
    });
    // clone the original table
    var newTbl = oTbl.clone();
    oTbl.parent().parent().prepend(newTbl);
    newTbl.wrap("<div/>");
    // remove table header from original table
    oTbl.find('thead tr').remove();
    // remove table body from new table
    newTbl.find('tbody tr').remove();
    // replace ORIGINAL COLUMN width                
    newTbl.width(newTbl.attr('data-item-original-width'));
    newTbl.find('thead tr td').each(function() {
        $(this).width($(this).attr("data-item-original-width"));
    });
    oTbl.width(oTbl.attr('data-item-original-width'));
    oTbl.find('tbody tr:eq(0) td').each(function() {
        $(this).width($(this).attr("data-item-original-width"));
    });
}
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data) {
            var addition = '';
            $.each($(data.response), function(i, d) {
                var row = '<tr>';
                $.each(d, function(j, e) {
                    row += '<td>' + e + '</td>';
                });
                row += '</tr>';
                $('#table_body').append(row);
            });
            scrolify($('#tblNeedsScrolling'), 160);
        }
    });
});

Answer 1

尝试在

中进行以下更改

HTML 部分:-

 <div style="width:1000px; height:400px; overflow:scroll">
    <table border="1" width="100%" id="tblNeedsScrolling">
    <tr>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>                
    </tr>
    <tbody id="table_body">
    </tbody>
    </table>
    </div>

CSS 部分:-

#tblNeedsScrolling {
table-layout: fixed;
font-weight: normal;
text-align: center;
border-collapse: collapse;
}
#tblNeedsScrolling tr td, #tblNeedsScrolling td {
font-size: 11px;
border: 1px solid #B9B9B9;
padding: 3px 7px 2px 7px;
}
#tblNeedsScrolling thead td {
font-size: 12px;
text-align: center;
padding-top: 5px;
padding-bottom: 4px;
}
#tblNeedsScrolling tr.alt td {
color: #000000;
background-color: #EAF2D3;
}

#tblNeedsScrolling thead tr td
{
width:50px ! important;
}


#tblNeedsScrolling tbody tr td
{
width:50px ! important;
}