如何将文本文件数据在HTML表格中分为两列展示？

我尝试将文本文件数据展示到HTML表格中，但目前仅显示单个<td>元素。我希望将以下数据分为两个<td>（对应Survey Description和SurveyCode两列）进行展示：

Survey Description                       SuerveyCode
customer-Behavioral                      U4
Customer-Government/Medicare Advantage   U1
Customer-ALL ELSE                        U2
Provider-Behavioral                      U4
Provider-All ELSE                        U3
Account Specific:Amazon                  A1
HIL NURSE                                C1

以下是我编写的HTML及jQuery代码：

<!DOCTYPE html>
<html>
<head>
<title>Survey Gadget</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.gadget-title{
    color:blue;
    text-align:center;
}
#tablediv{
    border:1px solid #ddd;
}
.gadget-body{
    display: table; margin: 0 auto;

}
div {
    display: inline-block;
    padding: 0px 15px 15px 15px; 
}
p{
    font-weight:bold;
    font-size:18px;
}
.green-text{
    color:green;
}
.yellow-text{
    color:yellow;
}
.red-text{
    color:red;
}
.s-logo{
    display:block;
    text-align:center;
    padding-bottom:0px;
}
.dot{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}
.green-text .dot{
    background-color:green;
}
.yellow-text .dot{
    background-color:yellow;
}
.red-text .dot{
    background-color:red;
}
.s-text{
    padding:0px;
}
</style>
</head>
<body>

<h1 class="gadget-title">Survey Gadget</h1>

<div class="gadget-body">
    <div class="s-logo">
        <img src="survey-icon.png" width="50px;"/>
    </div>
    <div>
        <p class="green-text"><span class="dot"></span> <span class="s-text">Automation On</span></p>
    </div>
    <div>
        <p class="yellow-text"><span class="dot"></span> <span class="s-text">Manual</span></p>
    </div>
    <div>
        <p class="red-text"><span class="dot"></span> <span class="s-text">Restricted</span></p>
    </div>
</div>


<div id="output"></div>
<div id="tablediv"></div>
</body>
<script>
$(document).ready(function(){
  populateTable();
});

function populateTable() {
    var tableContent = '';
    $.get( 'http://localhost/survey/surveydetails.txt', function( data ) {
      //alert(data);
      var lineByline = data.split('\n')
        $.each(lineByline , function(index,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });
        $('#tablediv').html(tableContent);
    });
};
</script>
</html>

恳请各位提供帮助，提前致谢。

核心问题是当前代码未将每行数据拆分为两部分，直接把整行内容放入单个<td>。可以通过正则匹配多空格分隔符拆分数据，同时完善表格结构：

1. 补充完整的<table>标签和表头，让表格结构符合规范
2. 用split(/\s{2,}/)拆分每行（匹配2个及以上连续空格作为分隔符）
3. 过滤空行，避免生成无效表格行
4. 去除每个字段的多余空格，保证内容整洁

修改后的populateTable函数代码如下：

function populateTable() {
    // 初始化表格结构，添加表头
    var tableContent = '<table border="1"><thead><tr><th>Survey Description</th><th>SurveyCode</th></tr></thead><tbody>';
    $.get('http://localhost/survey/surveydetails.txt', function(data) {
        var lineByline = data.split('\n');
        $.each(lineByline, function(index, value) {
            // 去除行前后空格，过滤空行
            var trimmedLine = value.trim();
            if (trimmedLine === '') return;
            
            // 用多空格拆分每行数据为两部分
            var parts = trimmedLine.split(/\s{2,}/);
            if (parts.length >= 2) {
                tableContent += '<tr>';
                tableContent += '<td>' + parts[0].trim() + '</td>';
                tableContent += '<td>' + parts[1].trim() + '</td>';
                tableContent += '</tr>';
            }
        });
        // 闭合表格标签
        tableContent += '</tbody></table>';
        $('#tablediv').html(tableContent);
    });
};

关键说明 #

• split(/\s{2,}/)：确保仅将连续多空格作为分隔符，避免描述文本中的单个空格被误拆分
• 补充<table>和表头：让表格具备完整的HTML结构，样式展示更清晰
• 空行过滤和trim()处理：避免生成无效的表格行，保证内容格式整洁

内容的提问来源于stack exchange，提问作者Ganesh Putta