Динамические строки таблицы переполняются внутри таблицы - PullRequest
Новая
       19

Динамические строки таблицы переполняются внутри таблицы

0 голосов
/ 22 мая 2018

Я создаю динамическую таблицу, используя jQuery, и получаю данные из файла .asp, используя JSON.

Я могу получить все данные, но при заполнении таблицы данными полоса прокрутки отсутствует, а строки переполняются.поэтому я не могу их увидеть и щелкнуть.

Может кто-нибудь помочь мне с этой задачей?

Вот таблица в 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]);
}

1 Ответ

0 голосов
/ 22 мая 2018

Не добавляйте каждый раз в таблицу. Вместо этой разметки сборки добавьте один раз и добавьте, как показано ниже, используя код +=. Каждый раз, когда вы переходите к dom и add, возникает проблема с производительностью. 

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; }
...