我有一个脚本，当我单击“添加”按钮时，将弹出模式窗体，然后提交它将在表中追加行的数据，并将添加数据插入到行中。
我的剧本：
<script>
$(function () {
/* function for dynamic numbering */
function updateRowOrder() {
$('td.id').each(function (i) {
$(this).text(i + 1);
});
}
/* if input textValue get press keyboard enter */
$("#textValue").keydown(function (e) {
if (e.keyCode == 13) {
/* if get so trigger to addBtn */
$("#addBtn").trigger("click");
$(this).val("");
}
});
$(document).on("click", "#save, .delRow", function (e) {
/* if document clicked is addBtn */
if ($(this).is("#save")) {
/* Append template script to table tbody */
$($("#template").html()).appendTo("#dataTables-example tbody");
/* Append textValue value to class rowValue and change classname */
$(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
$(".taskValue").append($("#task").val()).attr("class", "taskValues");
$(".ProleValue").append($("#primaryRole").val()).attr("class", "roleValues");
var appendComma = ($(".SroleValue").val() == '') ? '' : ', ';
$(".SroleValue").append(appendComma + $("#secondaryRole").val()).attr("class", "roleValues");
/* Update Numbering */
updateRowOrder();
}
else {
/* Just remove the tr on the click of a mouse */
$(this).closest("tr").remove();
/* Update Numbering */
updateRowOrder();
}
$('.up, .down').click(function(e){
e.preventDefault();
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
}
else if ($(this).is(".down")){
row.insertAfter(row.next());
}
else{
}
$('tbody tr[class="move"] td:first-child').each(function(idx, item) {
$(this).text(idx+1);
});
});
$('.edit').click(function(){
//get id, by a simple method of finding the element
id = $(this).parents('tr').find('td:first').text();
$('#myModalEdit').html(
'<div class="row">' +
'<div class="col-lg-12">' +
'<div class="panel panel-success">' +
'<div class="panel-heading">' +
'Edit' +
'</div>' +
'<div class="panel-body">' +
'<div class="table-responsive">' +
'<table class="table table-bordered" id="dataTables-example">' +
'<thead>' +
'<tr>' +
'<td>Order</td>' +
'<td>'+ id +'</td>' +
'</tr>' +
'<tr>' +
'<td>Activity</td>' +
'<td><input type="text" value="'+ $ (this).parents('tr').find('td:nth-child(2)').text() +'"/></td>' +
'</tr>' +
'<tr>' +
'<td>Task Code</td>' +
'<td>' +
'<select name="" id="task" class="form-control">' +
'<option value="defalut" disabled="disabled" selected="selected"></option>' +
<?php
foreach($tasktype as $task)
{
?>
'<option value="<?php echo $task['TaskCode'];?>"><?php echo $task['TaskCode'];?></option>' +
<?php
}
?>
'</select>' +
'</td>' +
'</tr>' +
'</thead>' +
'</table>' +
'<button type="submit" class="btn btn-success change" value="'+ id +'">Save Changes</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
});
//change text
$('.change').click(function(){
//get id via button value
id = $(this).val();
//get the closest input text
new_text = $(this).siblings('input[type="text"]').val();
//find the specific tr that has an id of.. and look for the corresponding td to change, please read about eq() in jquery
$('#template script').find('tr#' + id).find('td').eq('1').text(new_text);
});
/* clearing input textValue */
$("#textValue").val("");
var d = $('select option:disabled').prop('disabled', '');
$('select').val(0);
d.prop('disabled', 'disabled');
});
});
</script>
当我追加表格行时，它也会插入编辑按钮以及我插入的数据。
这是我的表格，其中插入了添加数据：
<table class="table table-bordered" id="dataTables-example">
<thead>
<tr>
<td>Order</td>
<td>Activity</td>
<td>Task Code</td>
<td>Primary Role Code</td>
<td>Secondary Role Code</td>
</tr>
</thead>
<tbody>
<script id="template" type="text/template">
<tr class="move">
<td class="id"></td>
<td><p class="rowValue"></p></td>
<td><p class="taskValue"></p></td>
<td><p class="ProleValue"></p></td>
<td><p class="SroleValue"></p></td>
<td><a href="#" class="edit"><i class="fa fa-edit fa-fw"></i></a>
<a href='#' class="delRow"><i class="fa fa-trash-o fa-fw"></i></a>
</td>
<td>
<a href='#' class="up"><i class="fa fa-arrow-up fa-fw"></i></a>
<a href="#" class="down"><i class="fa fa-arrow-down fa-fw"></i></a>
</td>
</tr>
</script>
</tbody>
</table>
这是我的模态形式：
<form name="stuff">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 class="modal-title" id="myModalLabel">Add</h3>
</div>
<div class="modal-body">
<form name="modal-form" class="form-horizontal">
<!-- form stuff goes here -->
<table class="table table-bordered" id="dialog-form">
<thead>
<tr>
<td>Activity</td>
<td><input type="text" id="textValue" class="typeahead form-control"/></td>
</tr>
<tr>
<td>Task Code</td>
<td>
<select name="" id="task" class="form-control">
<option value="defalut" disabled="disabled" selected="selected"></option>
<?php
foreach($tasktype as $task)
{
?>
<option value="<?=$task['TaskCode']?>"><?=$task['TaskCode']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Primary Role Code</td>
<td>
<select id="primaryRole" class="form-control">
<option value="defalut" disabled="disabled" selected="selected"></option>
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Secondary Role Code</td>
<td>
<select id="secondaryRole" class="form-control" multiple="multiple" style="width:400px;">
<option></option>
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
</thead>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" type="submit" class="btn btn-primary" id="save" data-dismiss="modal">
Create
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>
答案 0 :(得分：0)
这可以让您深入了解如何做到这一点。
请注意.live对于新创建的编辑按钮应为.on事件
然后在编辑功能上，您可以使用任何可以应用此类数据属性的引用，以便您可以轻松地将它们拉出来，然后在模态中应用详细信息
请参阅演示 here
更新了演示添加的附加功能和带注释的按钮