Question

我使用jQuery创建一个动态表，并使用JSON从.asp文件获取数据。

我可以获取所有数据，但是当用数据填充表格时，没有滚动条并且行溢出，所以我无法看到并点击它们。

有人可以帮我这个任务吗？

以下是HTML中的表格：

<table id="errorCodesBodyfh">
    <tbody id="tabBodyfh">
    </tbody>
</table>

以下是我填写的方式：

for (i = json.errorlistcount - 1; i >= 0; i--){
    data = json.errorlist[i];
    var errsplit = data.split(";");
    var row = [];
    var errorTime = timeFormat.get(errsplit[0]);
    var errorCode = parseInt(errsplit[1]);
    var errorDetails = errsplit[2];

    if (errorCode < 3000) {
        img = imgWarning;
        var imgType = typWarning;
    } else {
        img = imgError;
        imgType = typError;
    }

    row[i] = '<tr id="row' + i +'">'
    + '<td style="width: 10%;"><img '+ img + '></td>'
    + '<td>'+ imgType + ' ' + errorCode + '<br>Time ' + errorTime + '</td>'
    + '<td style="display: none;">' + errorDetails + '</td></tr>';
    $('#tabBodyfh').append(row[i]);
}

Answer 1

每次都不要在表格中添加。不要使用此构建标记一次，并使用+=添加如下代码。每次进入dom并追加性能问题。

var html = '';
for (i = json.errorlistcount - 1; i >= 0; i--) {
  html += '<tr id="row' + i + '">' +
    '<td style="width: 10%;"><img ' + img + '></td>' +
    '<td>' + imgType + ' ' + errorCode + '<br>Time ' + errorTime +
    '</td>' +
    '<td style="display: none;">' + errorDetails + '</td></tr>';

}
$('#tabBodyfh').append(html);

用一些div包裹你的桌子并尝试使用这样的css。或者你可以直接在你的桌子上使用css。

<div class="yourtable_container">
<table> </table>
</div>


.yourtable_container{ overflow:auto; width: 500px;height: 200px; }

动态表行在表内溢出

1 个答案: