使用循环通过jQuery填充HTML表格时内容溢出表格问题排查

Problem Statement #

I'm using jQuery to populate data into multiple HTML tables, but all content after the second row is appearing outside the table. I can't identify the root cause, and here's my loop code:

var title = '';
$('#results_credentials').html("");
for(var i in data) {
    var m = '';

    var end_of_tbl = '</tbody>';
    end_of_tbl += '</table>';
    end_of_tbl += '</div>';
    end_of_tbl += '</div>';
    end_of_tbl += '</div>';

    if(title !== data[i].title) {
        if(title !== "") {
            m += end_of_tbl;
        }

        title = data[i].title;
        
        m += '<div class="panel-collapse box box-warning">';
        m += '<div class="box-header">';
        m += '<h3 class="box-title">';
        m += '<a href="#box_expand_' + data[i].sequence + '" data-toggle="collapse" id="credential_title_' + data[i].sequence + '">' + data[i].title + '</a>';
        m += '</h3>';
        m += '</div><!-- /.box-header -->';
        
        m += '<div class="box-body panel-collapse collapse2" id="box_expand_' + data[i].sequence + '">';
        m += '<div class="table-responsive">';
        m += '<table class="table table-bordered table-hover">';
        m += '<thead>';
        m += '<tr>';
        m += '<th class="credential_group credential_group_' + data[i].title.replace(' ', '_') + '">Group</th>';
        m += '<th>Note</th>';
        m += '<th>Username</th>';
        m += '<th>Password</th>';
        m += '<th>Updated</th>';
        m += '<th colspan="2">Actions</th>';
        m += '</tr>';
        m += '</thead>';
        m += '<tbody>';
    }

    m += '<tr id="credential_row_' + data[i].sequence + '">';
    m += '<td colspan="7">test</td>';
    m += '</tr>';

    $('#results_credentials').append(m);
}

Root Cause #

1. Unclosed Table Structure: The closing tags for the last table (end_of_tbl) are never added to the DOM. When the loop finishes processing the final group of data, the table remains unclosed, and the browser attempts to auto-correct the invalid HTML, pushing subsequent rows outside the table.
2. Frequent DOM Appends: Appending HTML fragments to the DOM in every loop iteration forces the browser to re-render the page multiple times, leading to unexpected rendering behavior and performance issues.

Fixed Code #

var title = '';
var html = '';
$('#results_credentials').html("");
// Define closing tags once
var end_of_tbl = '</tbody></table></div></div></div>';

for(var i in data) {
    if(title !== data[i].title) {
        if(title !== "") {
            html += end_of_tbl;
        }

        title = data[i].title;
        
        html += '<div class="panel-collapse box box-warning">';
        html += '<div class="box-header">';
        html += '<h3 class="box-title">';
        html += '<a href="#box_expand_' + data[i].sequence + '" data-toggle="collapse" id="credential_title_' + data[i].sequence + '">' + data[i].title + '</a>';
        html += '</h3>';
        html += '</div><!-- /.box-header -->';
        
        html += '<div class="box-body panel-collapse collapse2" id="box_expand_' + data[i].sequence + '">';
        html += '<div class="table-responsive">';
        html += '<table class="table table-bordered table-hover">';
        html += '<thead>';
        html += '<tr>';
        html += '<th class="credential_group credential_group_' + data[i].title.replace(' ', '_') + '">Group</th>';
        html += '<th>Note</th>';
        html += '<th>Username</th>';
        html += '<th>Password</th>';
        html += '<th>Updated</th>';
        html += '<th colspan="2">Actions</th>';
        html += '</tr>';
        html += '</thead>';
        html += '<tbody>';
    }

    html += '<tr id="credential_row_' + data[i].sequence + '">';
    html += '<td colspan="7">test</td>';
    html += '</tr>';
}

// Add closing tags for the final table
html += end_of_tbl;

// Append the complete HTML string once
$('#results_credentials').append(html);

Key Fixes #

• Build HTML Off-DOM: Construct the entire HTML content in a single string before appending it to the DOM. This avoids frequent re-renders and ensures proper tag nesting.
• Close the Last Table: Explicitly add the closing tags for the final table after the loop completes, ensuring all table structures are properly closed.

Content sourced from Stack Exchange, question author: charlie