如何将textarea列表数据回填至对应HTML表格行？

页面内存在一个id为leaderTable的HTML表格，结构示例如下：

<table id='leaderTable'>
      <tbody>
            <tr>
                <td> Name1</td><td> item1</td><td> item2</td> <td> item3</td><td> item4</td><td> item5</td>               
    </tr>
            <tr>
                <td> Name2</td> <td> item1</td> <td> item2</td><td> item3</td><td> item4</td><td> item5</td>
    </tr>
    <tr>    
        <td> Name3</td> 

   -- 更多行省略 --

目前已实现功能：根据输入的leaderName匹配表格第一列的名称，将对应行的所有单元格内容提取到id为leaderInfoArea的textarea中，提取代码如下（已修正原代码中的笔误）：

function getLeaderData() {
    let leaderInfoArea = document.getElementById('leaderInfoArea') ;
    let leaderName = document.getElementById('leaderName').value.trim();
    leaderName = leaderName.toLowerCase().replace('.', ' ').replace(/  +/g, ' ');
    
    let tab = document.getElementById('leaderTable');
    let tabRows = tab.rows;
    for (let i = 0; i < tabRows.length; i++) {
        let leaderNameCell = tabRows[i].cells[0];
        let nextLeaderName = leaderNameCell.innerText.trim();
        nextLeaderName = nextLeaderName.toLowerCase().replace('.', ' ').replace(/  +/g, ' ');
        if (leaderName === nextLeaderName) {
            leaderInfoArea.value = "";
            for (let j = 0; j < tabRows[i].cells.length;  j++) {
                leaderInfoArea.value += tabRows[i].cells[j].innerText + "\n";
            }
            return;
        }
    }
}

当前leaderInfoArea的内容为每行一个数据的列表（共6行），示例格式：

Name2
item1
item2
item3
item4
item5

需要实现：将编辑后的该列表数据回填至原表格对应行，替换原有数据。

可以编写一个saveLeaderData函数，复用提取函数的名称匹配逻辑，再将textarea的内容拆分后逐个替换单元格内容。

代码实现 #

function saveLeaderData() {
    // 处理输入的名称，保持和提取逻辑一致
    let leaderName = document.getElementById('leaderName').value.trim();
    leaderName = leaderName.toLowerCase().replace('.', ' ').replace(/  +/g, ' ');
    
    // 获取textarea中的修改后数据，兼容不同换行格式拆分
    let leaderInfoArea = document.getElementById('leaderInfoArea');
    let updatedData = leaderInfoArea.value.trim().split(/\r?\n/);
    
    let tab = document.getElementById('leaderTable');
    let tabRows = tab.rows;

    // 遍历表格找到目标行
    for (let i = 0; i < tabRows.length; i++) {
        let leaderNameCell = tabRows[i].cells[0];
        let nextLeaderName = leaderNameCell.innerText.trim().toLowerCase().replace('.', ' ').replace(/  +/g, ' ');
        
        if (leaderName === nextLeaderName) {
            // 逐个替换单元格内容，避免索引越界
            for (let j = 0; j < tabRows[i].cells.length; j++) {
                tabRows[i].cells[j].innerText = updatedData[j] ? updatedData[j].trim() : '';
            }
            return; // 找到目标行后直接退出循环
        }
    }
}

使用方式 #

在页面中添加一个触发保存的按钮：

<button onclick="saveLeaderData()">保存修改</button>

用户编辑完leaderInfoArea的内容后，点击该按钮即可将修改后的数据回填到表格对应行。

注意要点 #

• 用/\r?\n/拆分内容，兼容Windows（\r\n）和Unix（\n）系统的换行格式
• 替换时做空值判断，避免因textarea内容行数不足导致的索引越界问题
• 保持和提取函数一致的名称处理逻辑，确保能精准匹配到目标行

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