Блог

Я пытаюсь скопировать строку таблицы, изменить ввод в соответствии с вводом модального флажка и добавить новую строку

У меня есть таблица категории элементов. Если я нажму кнопку «Плюс», появится модальный значок с каким-либо флажком в списке цветов. если выбрать несколько цветов из флажков, текущая строка таблицы копируется и добавляется новая строка с тем же цветовым кодом в предыдущей строке. Ниже приведен пример кода: jsFiddle

 <div class="container">
  <table class="table table-border">
    <tr>
      <th>Main Category</th>
      <th>Item</th>
      <th>Color</th>
    </tr>
    <tr id="1">
      <td>Top</td>
      <td>T shirt -R</td>
      <td><input name="colorid[]" type="text" value="#FF0000" >  
          <a  href="#" class="btn btn-sm btn-success newcolor"> </a>
      </td>
   </tr>
  <tr id="2">
      <td>Top</td>
      <td>T shirt -W</td>
      <td><input name="colorid[]" type="text" value="#FFFFFF" >  
          <a  href="#" class="btn btn-sm btn-success newcolor"> </a>
      </td>
   </tr>
  </table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="sizeLabel">
 <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <!-- <button type="button" class="btn btn-danger btn-xs pull-right" data-dismiss="modal">Close</button> -->
                <h2 class="modal-title text-center" id="myModalLabel">Color List</h2>
            </div>

                <div class="modal-body">
                    <div class="control-group">

                        <div class="checkbox">
                            <label>
                                <input name="colorid[]" type="checkbox" value="#00AD43" class="ace checkbox-input-clr" >
                                <span class="lbl"> Green (#00AD43)</span>

                            </label>
                              <label>
                                <input name="colorid[]" type="checkbox" value="#00008B" class="ace checkbox-input-clr" >
                                <span class="lbl"> Blue (#00008B)</span>

                            </label>
                             <label>
                                <input name="colorid[]" type="checkbox" value="#FFFF00" class="ace checkbox-input-clr" >
                                <span class="lbl"> Yellow (#FFFF00)</span>

                            </label>
                        </div> 

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-md-offset-3 col-md-9"> 
                        <button class="btn btn-info" type="button" id="modal_data" data-dismiss="modal">
                            <i class="ace-icon fa fa-check bigger-110" ></i> Done
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

    $('#myModal').on('hidden.bs.modal', function (e) {

       var trid=$(this).data("idvalue");
       var trcopy=$('#'   trid).html();
       var data='';
            $('.checkbox-input-clr').each(function(i, v){
                    if ($(this).is(":checked"))
                    {
                     data ='<tr>';
                     data = trcopy ;
                     data ='</tr>';
                   }
                });
       $('#'   trid).after(data);
    })
  

Я ожидаю, что новая строка будет добавлена с новым цветовым кодом в поле ввода цвета, поскольку флажок установлен в модальном. Например: если я проверил синий и желтый, две новые строки будут добавлены с цветовым кодом #00008B и #FFFF00

Я решил эту проблему. Я использую метод replace(). Сначала я копирую предыдущую строку таблицы и помещаю переменную trcopy. затем найдите значение ввода текста в trcopy и замените на значение ввода флажка.

 $('#myModal').on('hidden.bs.modal', function (e) {

   var trid=$(this).data("idvalue");
   var trcopy=$('#'   trid).html();
   var data='';
   var chk = [];
        $('.checkbox-input-clr').each(function(i){

                if ($(this).is(":checked"))
                {
                    var asd = $(trcopy).find("input:text").val();
                    chk[i] = $(this).val();                       
                    var newc = trcopy.replace(asd,chk[i]); 

                       data ='<tr>';
                       data = newc;
                       data ='</tr>';
                }
            });

   $('#'   trid).after(data);
   $('.checkbox-input-clr').prop("checked", false);
})
  

Вот рабочая демонстрация