如何用jQuery将文本按行拆分后逐字符放入表格tr、td？

你的代码存在一个关键问题：每次添加<tr>后，用$('#table tr').append(...)会把当前行的所有<td>追加到页面上**所有的<tr>**里，导致所有字符都混入每一行，完全打乱了原有的行布局。

正确的实现方式 #

核心思路是为每一行单独创建专属的<tr>元素，把当前行的所有<td>都添加到这个<tr>中，最后再将整个<tr>插入表格，避免跨行污染。

写法1：使用for循环

jQuery.get('AA.txt', function (data) {
    // 兼容Windows(\r\n)和Linux/macOS(\n)的换行符，拆分文本为行
    var lines = data.split(/\r?\n/);
    
    for(var i = 0 ; i < lines.length; i++){
        var line = lines[i];
        // 跳过空行，避免生成无内容的<tr>
        if(!line.trim()) continue;
        
        // 创建当前行的<tr>元素
        var $tr = $('<tr></tr>');
        // 拆分每行的每个字符（包含空格）
        var chars = line.split(/(?!$)/u);
        
        // 遍历字符，将每个字符放入<td>并添加到当前<tr>
        for(var k = 0 ; k < chars.length; k++){
            $tr.append('<td>' + chars[k] + '</td>');
        }
        
        // 将组装好的<tr>添加到表格
        $('#table').append($tr);
    }
});

写法2：使用jQuery的each循环（更简洁）

jQuery.get('AA.txt', function (data) {
    var lines = data.split(/\r?\n/);
    
    $.each(lines, function(index, line){
        if(!line.trim()) return true; // 跳过空行
        
        var $tr = $('<tr></tr>');
        var chars = line.split(/(?!$)/u);
        
        $.each(chars, function(idx, char){
            $tr.append('<td>' + char + '</td>');
        });
        
        $('#table').append($tr);
    });
});

额外优化建议 #

如果要保持原文本的对齐效果，给<td>添加以下CSS样式：

#table td {
    width: 1em; /* 固定每个单元格宽度 */
    text-align: center; /* 字符居中显示 */
    white-space: pre; /* 严格保留空格 */
}

内容的提问来源于stack exchange，提问作者dik-men