0
DataTable実装の行を編集する方法を作成しようとしています。私はAdminLTE BootStrapを使用しています。PHPデータを含むフォームを更新するのは最後の行（DataTable/BootStrap）のみです
この繰り返しでは、各行の最後にモーダルを開始するボタンがあります。私は、ボタンがモーダルのデータを入力し、基本的に行データでフォームに記入して、ユーザーが変更を加えて再度投稿できるようにしたいと思います。
私は以下のように「フォーム」を更新するという点で「動作する」がありますが、意味をなさないPHPのWhileループの最後のアイテムを選択するだけです。
[編集]ボタンをクリックした行の正しいデータでフォームを更新するにはどうすればよいですか？ループを中断することなく特定のデータを送信してデータテーブルを表示する方法が必要です。
表の呼び出し
<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();
?>
...
モーダルと
<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 -->
を形成し、念のためのDataTableスクリプト
<script>
$(function() {
$('#example1').DataTable()
$('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
})
})
</script>
がどれ指導が認識されます。ありがとう！
にJSにこれを投げました。私は、DataTableの初期化の下にスクリプトを含め、ボタンのクラスとして 'tableButton'を追加しましたが、舞台裏で何が起こっているのかはわかりません。 – BR89
私はいくつかの情報で私の答えを更新しました – miknik