如何实现表格每行单元格值赋值到对应text box？当前代码仅取最后td值

首先，咱们先拆解下你现有代码的核心问题：

• 你遍历的是所有<td>元素，而非每一行<tr>，这就导致每处理一个单元格都去操作同一个固定name的输入框，最后自然只会留下最后一个单元格的内容
• <td>元素本身没有value属性，用$(this).attr('value')根本拿不到单元格里的文本内容，得用.text()来获取实际内容
• 你硬编码了输入框的name值text-194，但每行的输入框name是不一样的（比如第一行是text，第二行是text-194），所以得关联当前行的输入框，而非固定某一个

修正后的实现思路 #

咱们应该以每一行为单位独立处理：

1. 遍历表格里的每一个<tr>
2. 在当前行内，分别提取oridinal-number、number、name这三个单元格的文本内容
3. 找到当前行对应的<input>元素
4. 把提取到的三个内容组合后，赋值给这个输入框的value

完整的修正代码 #

(function ($) {
    $(document).ready(function () {
        // 遍历每一行tr
        $('tr').each(function () {
            // 获取当前行的各个单元格内容，trim()去掉多余空格
            const ordinal = $(this).find('.oridinal-number').text().trim();
            const number = $(this).find('.number').text().trim();
            const name = $(this).find('.name').text().trim();
            
            // 组合成需要的内容，格式可以根据需求调整
            const combinedValue = `${ordinal} ${number} ${name}`;
            
            // 找到当前行的input并赋值
            $(this).find('.input input').val(combinedValue);
        });
    });
})(jQuery);

代码细节解释 #

• $('tr').each(function () {...})：以行为单位遍历，确保每一行的处理都是独立的，不会互相干扰
• $(this).find('.oridinal-number')：在当前行内查找指定类名的单元格，避免误取其他行的元素
• .text().trim()：获取单元格的文本内容并去除前后空格，保证内容干净无冗余
• $(this).find('.input input')：精准定位当前行对应的输入框，确保赋值给正确的元素

这样处理后，每一行的输入框都会拿到当前行三个单元格的组合值，不会再出现只取最后一个单元格内容的问题啦。

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