我正在尝试创建一种在DataTable实现中编辑行的方法。我正在使用AdminLTE BootStrap。
在这次迭代中，我在每行末尾都有一个按钮，用于启动模态。我希望按钮填充模态中的数据，并基本上用行数据填写表单，以便用户可以进行任何更改并重新发布。
我在下面的“工作”是因为它确实更新了表单，但它只是选择我的PHP的While循环中的最后一项是有意义的。
如何使用单击“编辑”按钮的行中的正确数据更新表单？必须有一种方法来发送特定数据而不中断循环以仍然显示数据表。
表格电话
ID|NAME |FOOD |Score
1 |FRED |MIXED|73
2 |HENRY |BERRY|20
3 |Alex |Apple|40
...
模态和表格
<table id="buildTracker" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Tracker ID</th>
<th>INI</th>
<th>Owner</th>
<th>Entered By</th>
<th>Record ID</th>
<th>Record Name</th>
<th>Items</th>
<th>Feature</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["ID"]."</td><td>".$row["INI"]."</td><td>".
$row["Owner"]."</td><td>".
$row["EnteredBy"]."</td><td>".
$row["RecordID"]."</td><td>".$row["RecordName"]."</td><td>".
$row["Items"]."</td><td>".$row["Feature"]."</td><td>";
echo '<button type="button" id="edit" onclick="update()" class="btn btn-default" data-toggle="modal" data-target="#modal-default">';
echo 'Edit';
echo '</button>'.'</td>';
echo "</tr>";
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
}
} else {
echo "0 results";
}
$conn->close();
?>
以防万一DataTable脚本
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
<form id="buildtrackerform" role="form" action="formSubmit.php" method="post">
<div class="box-body">
<div class="form-group">
<div class="row">
<div class="col-xs-5">
<label for=>Entered By</label>
<input type="text" class="form-control" name="enteredBy" id="enteredBy" placeholder="Entered By">
</div>
<div class="col-xs-2">
<label for="ini">INI</label>
<select onChange="setOwner(this)" style="text-transform: uppercase;" class="form-control select2" style="width: 100%;" name="ini" id="ini">
<option selected="selected" disabled="disabled">-Select-</option>
</select>
</div>
<div class="col-xs-5">
<label for="owner">Owner</label>
<input type="text" class="form-control" name="owner" id="owner" placeholder="Nemours Owner">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="recordID">Record ID</label>
<input type="text" class="form-control" name="recordID" id="recordID" placeholder="Record ID">
</div>
<div class="col-xs-6">
<label for="recordName">Record Name</label>
<input type="text" class="form-control" name="recordName" id="recordName" placeholder="Record Name">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label>Items</label>
<select multiple class="form-control select2" name="items[]" id="items[]" data-placeholder="  Type an item then press enter"
style="width: 100%;">
</select>
</div>
</div>
</div>
<!-- There are more fields - I removed them for the question -->
</div><!-- End Box Body -->
</div> <!-- End Modal Body -->
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
感谢任何指导。谢谢！
答案 0 :(得分：1)
删除按钮的onclick属性，然后给它一个类。让我们说这个例子的tableButton。然后修改你的javascript：
$(function () {
$('#example1').DataTable()
var table = $('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
});
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
// data now contains your row data, insert it where you like
})
})
修改
为您提供几点建议。在原始代码中，您应该删除此位，因为您当前正在为数据库中的每一行重复输出它：
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
我的原始代码段没有包含任何处理数据的内容，如果没有看到您的表格我不能准确但在$('.tableButton').click函数内，变量data将是包含值的数组对于单击按钮的行上的每个表的列。如果你修改这个函数看起来像这样你会得到这个想法：
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
alert( 'First column is '+data[0]+' Second column is '+data[1] );
})
一旦你弄清楚哪个列在哪里，那么你将alert更改为某些代码，这些代码会在表单的相关输入中插入值。
答案 1 :(得分：0)
我在这个例子中使用了多个数据标签。我认为它类似于miknik的建议，但没有使用data()函数。
在按钮的创建中回应以下内容。
data-id="'.$row["ID"].'" data-enteredBy="'.$row["EnteredBy"].'"
然后把它扔进底部的JS
<script>
$('#modal-default').on('show.bs.modal', function (e) {
var rowID = $(e.relatedTarget).attr('data-id');
$(this).find('#rowID').val(rowID);
var enteredBy = $(e.relatedTarget).attr('data-enteredBy');
$(this).find('#enteredBy').val(enteredBy);
//pass multiple data with data()
});
</script>