我在表格产品中做了一个按钮。当我点击按钮时会显示弹出表，供用户选择项目复选框。我正在使用formset在表中创建行。但我将项目插入表格产品的按钮不起作用。 用于选择项目的弹出表：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Search Product</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-10"><input type="text" class="form-control" id="search"
name="txtSearch"
placeholder="Search"></div>
<div class="col-lg-2">
<button type="button" class="btn start" id="btnSearch" name="btnSearch">
<i class="fa fa-search" aria-hidden="true"></i>
<span></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-body">
<div class="adv-table">
<table id="tblData"
class="display table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Supplier</th>
<th>Sale Code</th>
<th>Purchase Code</th>
<th></th>
</tr>
</thead>
{% if supplier_item %}
<tbody>
{% for i in supplier_item %}
<tr class="gradeX">
<td>{{ i.item.name }}</td>
<td>{{ i.supplier.name }}</td>
<td>{{ i.price }}</td>
<td>{{ i.quantity }}</td>
<td><input type="checkbox" name="choices"
id="{{ i.item.id }}"
value="{{ i.item.name }}">
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success" type="button" id="btnAddItems">Save changes</button>
</div>
</div>
</div>
</div>
jQuery的：
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
if ($(this).is(':checked'))
$(this).attr('checked', 'checked');
else
$(this).removeAttr('checked');
});
$('#btnAddItems').on('click', function () {
debugger;
var allVals = [];
$('input[checked=checked]').each(function () {
allVals.push($(this).val());
})
return allVals;
cloneMore('#dynamic-table tr.gradeX:last', 'form', allVals);
function cloneMore(selector, type, allVals) {
for (i = 0; i < allVals.length; i++) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function () {
var name = $(this).attr('name').replace('-' + (total - 1) + '-', '-' + total + '-');
var id = 'id_' + name;
var value = allVals[i];
$(this).attr({'name': name, 'id': id, 'value': value}).val('').removeAttr('checked');
});
newElement.find('label').each(function () {
var newFor = $(this).attr('for').replace('-' + (total - 1) + '-', '-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
};
});
});