如何復制表行並在修改輸入值后追加

Question

我試圖根據模態的復選框輸入復制表行修改輸入並追加新行

我有一個項目類別表。 如果我單擊加號按鈕，會出現一個帶有顏色列表復選框的模態。 如果從復選框中選擇一些顏色，則當前表行復制並在前一行中添加具有相同顏色代碼的新行。 下面是示例代碼： 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);
    })

我希望新行將在Color輸入字段中附加新的顏色代碼，因為復選框以模態檢查。 如：如果我選中了藍色和黃色，則兩個新行將附加顏色代碼＃00008B和＃FFFF00

Answer 1

我已經解決了這個問題。 我使用了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);
})

這是工作演示