Проблема с полем ввода, содержащимся в строке таблицы, не удалось установить для них значение - PullRequest
Новая
       29

Проблема с полем ввода, содержащимся в строке таблицы, не удалось установить для них значение

0 голосов
/ 30 июня 2018

Я застрял с проблемой. Я изо всех сил пытался выбраться из этого, но я не смог решить это. Я устанавливаю значение для поля ввода против строки таблицы, но значения готовятся к скрытому ряду. Я объяснил этот код ниже.

Я клонирую строку таблицы с помощью этой функции: 

      $('.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, одно из которых - значок, на котором открывается модальная форма: а второе - поле ввода тегов. Обратите внимание, что скрытая строка также содержит оба тдс. 

       <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>

Ниже тег td аналогичен существующим строкам. 

          <td>    
          <input contenteditable="false" name="unique_tag" value= "{{ d|get_item:"unique_tag" }}" 
          class = "myinput" id="tagsinputid" data-role="tagsinput" />
          </td>

для скрытой строки tr это так: 

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

Теперь На кнопке отправки модальной формы я хочу получить строку таблицы, по которой она нажата:

Например: 

Table 
    row1 + 
    row2 +
    row3 + (hidden row)

При щелчке по 2-й строке + иконке я хочу получить идентификатор строки 2, который я правильно понимаю по этому коду и задаю значение в следующем тд в тегах, вводимых для этой строки, но это не работает должным образом. 

      //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>

После выполнения этого кода то значение, которое я установил в поле ввода tagsinput, не отображается в этой строке (row2), но находится внутри скрытой строки (row3 +), что сбивает меня с толку, почему это происходит, что я сделал здесь не так. При отладке этого кода я получаю значение c право, которое равно 2, а не 3, но почему оно не показывает значения тегов на входе для 2-й строки, а показывает его для 3-й строки.

...