Question

我想要什么：当用户将焦点移到该字段上时，我想在另一个字符串中添加一个字符串。在表中，问题是我必须根据表的大小来构建字符串。如果您提供一些文档来帮助我，那真是太好了，因为我有点迷路了。

HTML：

<table id="tableAssemblage" class="dataAssemblage" style="display: table;">
<thead>
<tr class="entete">
    <td>
        Type</td>
    <td>
        Nom</td>
 </tr>
</thead>
<tbody>
    <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" length="35" maxlength="35" class="obligatoryAssemblage 
      nomAssemblage">        
   </td>

表格：result in my computer

jQuery / JS：

$(".nomAssemblage").focusout(function(){
  addApresFixNomElement();
});

function addSufixNomElement(){
   // Parametres
   var rowCount = $('#tableAssemblage tr').length;
   var typElem = $(".typ_element").val();
   var nomAss = $(".nomAssemblage").val();
   var Sufix;
   var id;
   // Switch
   switch (typElem)
   {
    case 'EDITION':
        for(id=1; id<rowCount; id++){
            Sufix = "[EDI ->" + id + "]";
            $(".nomAssemblage").append(Sufix);
        }

        break;

    case 'ENCART':
        break;

    case 'INCARTO':
        break;

    case 'INCPLUS':
        break;

    case 'OPP':
        break;

    case 'SUPPLEMENTS':
        break;
}

}

我想要的结果：This is what i want exaclty

Answer 1

您可以将$("#nom_element_" + id).val($("#nom_element_" + id).val() + " " + Sufix);用作$().append()来附加元素（也改进了逻辑）：

$(".nomAssemblage").focusout(function() {
  addSufixNomElement();
});

function addSufixNomElement() {
  // Parametres
  var rowCount = $('#tableAssemblage tbody tr').length;
  var typElem = $(".typ_element").val();
  var nomAss = $(".nomAssemblage").val();
  var Sufix = "";
  var id = 1;
  // Switch
  switch (typElem) {
    case 'EDITION':
      Sufix = "[EDI ->" + id + "]";
      break;

    case 'ENCART':
      Sufix = "[ENC ->" + id + "]";
      break;

    case 'INCARTO':
      //Sufix = "[INCA ->" + id + "]";
      break;

    case 'INCPLUS':
      //Sufix = "[INCP ->" + id + "]";
      break;

    case 'OPP':
      //Sufix = "[OPP ->" + id + "]";
      break;

    case 'SUPPLEMENTS':
      //Sufix = "[SUP ->" + id + "]";
      break;
  }
  for (id = 1; id < rowCount; id++) {
    $("#nom_element_" + id).val($("#nom_element_" + id).val().replace(/\[.*?\]/, '') + " " + Sufix);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" length="35" maxlength="35" class="obligatoryAssemblage nomAssemblage">
      </td>
      <tr>
  </tbody>
</table>

使用jQuery和条件在<td>中添加字符串

1 个答案: