修改输入值后如何复制表行并追加

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);
    })

我希望新行将在颜色输入字段中附加新的颜色代码，作为模式中选中的复选框。如：如果我勾选了蓝色和黄色，这两个新行将附加颜色代码#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);
})

这里是Working Demo