Javascript 表行中包含的输入字段存在问题，无法为其设置值

我被这个问题困住了。我曾试图摆脱这一困境，但我无法解决它。我正在针对表行设置输入字段的值，但没有设置值 正在设置隐藏行。我在下面进一步解释了这段代码

我正在通过此函数克隆表行：

      $('.table-add').click(function () {

        // var $tr = $TABLE.find('tr.hide');
        // var $clone = $tr.clone(true).addClass('hide table-line');

        // $tr.removeClass('hide table-line');

        var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
        hid = $TABLE.find('tr.hide').attr('id');
        // //Assigning every table row a unique ID
        var max=0;
        $('table').find('tr').each(function(){
            var id=parseInt($(this).attr('id'));
            if (id>=max){
               max = id;
             }
         });

         //cloning row with new ID  
         $clone.attr('id', parseInt(max)+1);
        // $clone.find('input.myinput').tagsinput('removeAll');
         // $TABLE.find('table').append($tr);

         $clone.appendTo( $('#'+hid).parent() );
        });

每一行都有两个td字段，其中一个是打开模式表单的图标，第二个是tagsinput输入字段。请注意，隐藏行还包含两个tds

       <td>
            <span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
      </td>

     <td>    
          <input contenteditable="false" name="unique_tag" 
          class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
     </td>

点击第二行+图标，我想获得第二行id，这是我对该代码的正确理解，并在下一个td in标签输入中针对该行设置值，但这并不正确

      //click on span1 element
      $('.modal-body-inner').on("click", "span.span1", function(){
          var t = $(this).text();               
          $(this).toggleClass("myclass");
      });

      //Click on model box
      $('tr #modelbox').click(function() {
         var $row = $(this).closest('tr');
         var tbid = $row.attr('id'); // table row ID
         $('#myModal').data('current', tbid); //save current tbid
         var fieldOption = []
         $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
         console.log(fieldOption);

          $('.modal-body-inner').html('');
          for(var i = 0, size = fieldOption.length; i < size ; i++){
                var item = fieldOption[i];
                $('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
          }
      });



      $('#modelformbuttonclick').click(function() {
          var tableRowId =  $('#myModal').data('current');
          c = '#' + tableRowId;
          //removing all tags if anyone updates tags
          $(c+ ' input.myinput').tagsinput('removeAll');
          var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];

          $('.modal-body-inner span.myclass').each(function() {
              c = '#' + tableRowId;
              var randomNumber = Math.floor(Math.random()*color.length);
              $(c + '  input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
              count = count+1;
          });
          submitForm();
      });



<!-- Modal Form -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Choose Remarks for your students </h4>
    </div>
    <div class="modal-body">
    <!-- <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> -->
    <div class="modal-body-inner"></div>
    </div>
    <div class="modal-footer">
      <!-- <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button> -->
      <button type="button" id = "modelformbuttonclick" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

//单击span1元素
$（'.modal body inner'）。在（“单击”，“span.span1”，函数（）上）{
var t=$（this.text（）；
$（this.toggleClass（“myclass”）；
});
//点击模型框
$（'tr#modelbox'）。单击（函数（）{
var$row=$（this.closest（'tr'）；
var tbid=$row.attr（'id'）；//表行id
$（'#myModal'）.data（'current'，tbid）；//保存当前tbid
var fieldOption=[]
$row.find（'#words option'）.each（function（）{fieldOption.push（$（this.val（））；}）；
console.log（fieldOption）；
$（'.modal body inner'）.html（''）；
对于（变量i=0，大小=fieldOption.length；i

执行此代码后，我在tagsinput输入字段中设置的值在该行（第2行）中不可见，但在隐藏行（第3行+）中设置的值让我困惑，为什么会发生这种情况，我在这里做错了什么。在调试这段代码时，我得到了c的值

---

右边是2而不是3，但为什么它不显示第二行的标记输入值，而是显示第三行的标记输入值。

您确定

$（“#myModal”）。数据（'current'）

包含正确的行ID吗？看起来使用它的代码是正确的。是的，它是正确的。你能创建一个演示问题的程序吗？很难说你发布的有限信息到底是怎么回事。使用a使代码在此处可执行。我不知道它是否相关，但在克隆行时，您正在创建重复的id，如

id=“modelbox”

。如果我为它们指定唯一的模式id，它会解决问题吗。我不这么认为，因为我有上面的调试代码，表id总是返回正确的，但它只是针对隐藏行设置值，我不知道为什么

        <td>    
          <input name="unique_tag" 
          class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
        </td>

Table 
    row1 + 
    row2 +
    row3 + (hidden row)

      //click on span1 element
      $('.modal-body-inner').on("click", "span.span1", function(){
          var t = $(this).text();               
          $(this).toggleClass("myclass");
      });

      //Click on model box
      $('tr #modelbox').click(function() {
         var $row = $(this).closest('tr');
         var tbid = $row.attr('id'); // table row ID
         $('#myModal').data('current', tbid); //save current tbid
         var fieldOption = []
         $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
         console.log(fieldOption);

          $('.modal-body-inner').html('');
          for(var i = 0, size = fieldOption.length; i < size ; i++){
                var item = fieldOption[i];
                $('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
          }
      });



      $('#modelformbuttonclick').click(function() {
          var tableRowId =  $('#myModal').data('current');
          c = '#' + tableRowId;
          //removing all tags if anyone updates tags
          $(c+ ' input.myinput').tagsinput('removeAll');
          var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];

          $('.modal-body-inner span.myclass').each(function() {
              c = '#' + tableRowId;
              var randomNumber = Math.floor(Math.random()*color.length);
              $(c + '  input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
              count = count+1;
          });
          submitForm();
      });



<!-- Modal Form -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Choose Remarks for your students </h4>
    </div>
    <div class="modal-body">
    <!-- <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> -->
    <div class="modal-body-inner"></div>
    </div>
    <div class="modal-footer">
      <!-- <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button> -->
      <button type="button" id = "modelformbuttonclick" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>