Я пытаюсь скопировать строку таблицы изменить ввод в соответствии с флажком ввода модального и добавить новую строку
У меня есть таблица категории товаров. Если я нажимаю кнопку «плюс», появляется модальное поле с некоторым флажком списка цветов. если выбрать несколько цветов из флажков, текущая строка таблицы копируется и добавляется новая строка с тем же цветовым кодом в предыдущей строке.
Ниже приведен пример кода: 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