使用jQuery根据条件向<td>中添加字符串的技术问询

看起来你的代码有几个关键问题导致功能无法正常工作，我来帮你梳理并修正：

原代码的核心问题 #

1. 函数名不匹配：你在focusout事件里调用的是addApresFixNomElement()，但实际定义的函数是addSuffixNomElement，这会直接导致函数无法触发。
2. 全局选择器误用：用$(".typ_element").val()会拿到页面上第一个类型选择框的值，而不是当前输入框所在行的对应值；同理，修改$(".nomAssemblage")会操作所有输入框，而非当前目标。
3. 行数计算错误：$('#tableAssemblage tr').length会把thead里的标题行也算进去，导致行号偏差。
4. 后缀添加方式错误：对输入框用append()是无效的，输入框的内容需要通过修改value属性来更新，或者在对应的<td>中添加独立元素。

修正后的完整实现 #

首先补全HTML结构（原代码里<tbody>直接包含<td>，缺少<tr>标签，这是HTML语法错误）：

<table id="tableAssemblage" class="dataAssemblage" style="display: table;">
  <thead>
    <tr class="entete">
      <td> Type</td>
      <td> Nom</td>
    </tr>
  </thead>
  <tbody>
    <!-- 第一行 -->
    <tr>
      <td class="centrer">
        <select name="typ_element_1" id="typ_element_1" class="obligatoryAssemblage typ_element">
          <option value="" selected="selected"></option>
          <option value="EDITION">EDITION</option>
          <option value="ENCART">ENCART</option>
          <option value="INCARTO">INCARTO</option>
          <option value="INCPLUS">INCPLUS</option>
          <option value="OPP">OPP</option>
          <option value="SUPPLEMENTS" disabled="">SUPPLEMENTS</option>
        </select>
      </td>
      <td class="centrer">
        <input type="text" name="nom_element_1" id="nom_element_1" value="" size="35" maxlength="35" class="obligatoryAssemblage nomAssemblage">
      </td>
    </tr>
    <!-- 测试用第二行 -->
    <tr>
      <td class="centrer">
        <select name="typ_element_2" id="typ_element_2" class="obligatoryAssemblage typ_element">
          <option value="" selected="selected"></option>
          <option value="EDITION">EDITION</option>
          <option value="ENCART">ENCART</option>
          <option value="INCARTO">INCARTO</option>
          <option value="INCPLUS">INCPLUS</option>
          <option value="OPP">OPP</option>
          <option value="SUPPLEMENTS" disabled="">SUPPLEMENTS</option>
        </select>
      </td>
      <td class="centrer">
        <input type="text" name="nom_element_2" id="nom_element_2" value="" size="35" maxlength="35" class="obligatoryAssemblage nomAssemblage">
      </td>
    </tr>
  </tbody>
</table>

然后是修正后的JS代码：

// 绑定失焦事件，传入当前操作的输入框元素
$(".nomAssemblage").focusout(function(){ 
  addSuffixNomElement($(this));
});

function addSuffixNomElement($currentInput){ 
  // 定位当前输入框所在的行
  const $row = $currentInput.closest('tr');
  // 获取当前行的类型选择值
  const typElem = $row.find(".typ_element").val();
  
  // 如果未选择类型，直接终止
  if(!typElem) return;
  
  // 获取当前行在tbody中的索引（从1开始计数）
  const rowIndex = $row.index() + 1;
  
  // 根据类型生成对应后缀
  let suffix = '';
  switch (typElem) {
    case 'EDITION':
      suffix = "[EDI ->" + rowIndex + "]";
      break;
    case 'ENCART':
      suffix = "[ENC ->" + rowIndex + "]";
      break;
    case 'INCARTO':
      suffix = "[ICT ->" + rowIndex + "]";
      break;
    case 'INCPLUS':
      suffix = "[ICP ->" + rowIndex + "]";
      break;
    case 'OPP':
      suffix = "[OPP ->" + rowIndex + "]";
      break;
    case 'SUPPLEMENTS':
      suffix = "[SUP ->" + rowIndex + "]";
      break;
    default:
      return;
  }
  
  // 方案1：将后缀添加到输入框的值中（避免重复添加）
  const currentValue = $currentInput.val().trim();
  // 先移除已存在的后缀格式
  const cleanValue = currentValue.replace(/\[[A-Z]{3} ->\d+\]$/, '');
  // 拼接新后缀并设置回输入框
  $currentInput.val(cleanValue + (cleanValue ? ' ' : '') + suffix);
  
  // 方案2：如果要在输入框所在<td>中添加独立的后缀标签（比如输入框后面显示）
  // $row.find('.suffix-tag').remove();
  // $currentInput.after(`<span class="suffix-tag" style="margin-left:8px;">${suffix}</span>`);
}

关键改进说明 #

• 行级元素定位：用closest('tr')精准找到当前输入框所在的行，确保只操作当前行的类型选择框和输入框，不会影响其他行。
• 准确的行号计算：$row.index()返回当前行在tbody同辈元素中的位置（从0开始），加1后得到符合需求的从1开始的行号。
• 避免重复后缀：通过正则表达式/\[[A-Z]{3} ->\d+\]$/匹配并移除已存在的后缀，防止多次失焦时重复追加。
• 灵活的添加方式：提供两种后缀添加方案，可根据实际需求选择修改输入框值，或在td内添加独立元素。

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