我正在尝试使用 PHP 和 JQuery 将 SQL 数据库中的值显示到文本框中。正在检索这些值，但不会显示在文本框中。我究竟做错了什么？<?phprequire 'UpdateTimerSQL.php';?><!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LiveData</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body><div class="container"><h2>Ajax</h2><p>Update Timer</p><table class="table"><?php $table = mysqli_query($connection, 'SELECT * FROM Timers'); while($row = mysqli_fetch_array($table)){ ?> <tr id="<?php echo $row['ID']; ?>"> <th>Timer_1</th> <td data-target="Timer_1"><?php echo $row['Timer_1']; ?></td> <th> <a href="#" data-role="update" class="btn btn-primary" data-id="<?php echo $row['ID']; ?>">Update</a> </th> </tr> <?php } ?> </table> <div class="container"> <div class="text-center"></div></div><!-- Modal --><div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Neutral Timer 1</label> <input type="hidden" id="ids" class="form-control"> <input type="text" id="Timer_1" class="form-control"> </div> <div class="modal-footer"> <a href="#" id="save" class="btn btn-primary pull-right">Update</a> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> </div> </div> </div> </div>
1 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
您的表结构无效。此外，您Timer_1无法找到所需的文本，这就是它无法正常工作的原因。
您的PHP代码应如下所示：
<table class="table">
<?php
$table = mysqli_query($connection, 'SELECT * FROM Timers');
while($row = mysqli_fetch_array($table)){
?>
<tr id="<?php echo $row['ID']; ?>">
<th>Timer 1</th>
<td data-target="Timer_1">
<?php echo $row['Timer_1']; ?>
</td>
<th>
<a href="#" data-role="update" class="btn btn-primary" data-id="<?php echo $row['ID']; ?>">Update</a>
</th>
</tr>
<?php
}
?>
</table>
这是演示代码：
$(document).ready(function() {
$(document).on('click', 'a[data-role=update]', function() {
var id = $(this).data('id');
//this(a tag)->tr(id)->td(data attr)->text
var Timer_1 = $(this).closest('tr[id=' + id + ']').find("td[data-target='Timer_1']").text();
//putting value in input box
$("#ids").val(id)
$('#Timer_1').val(Timer_1);
$('#myModal').modal('toggle');
});
//onclick of update button
$(document).on('click', '#save', function() {
//getting value of input box
var input_val = $(this).closest(".modal-body").find("#Timer_1").val();
//getting hidden id
var ids = $(this).closest(".modal-body").find("#ids").val();
//finding tr with same id and then update the td
$("table").find("tr[id='" + ids + "']").find("td[data-target='Timer_1']").text(input_val);
$('#myModal').modal('toggle');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Ajax</h2>
<p>Update Timer</p>
<table class="table">
<tr id="1">
<th>Timer 1</th>
<td data-target="Timer_1"> Something</td>
<th>
<a href="#" data-role="update" class="btn btn-primary" data-id="1">Update</a>
</th>
</tr>
<tr id="2">
<th>Timer 1</th>
<td data-target="Timer_1"> Something123</td>
<th>
<a href="#" data-role="update" class="btn btn-primary" data-id="2">Update</a>
</th>
</tr>
</table>
<div class="text-center"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Timer 1</label>
<input type="hidden" id="ids" class="form-control">
<input type="text" id="Timer_1" class="form-control">
</div>
<div class="modal-footer">
<a href="#" id="save" class="btn btn-primary pull-right">Update</a>
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
- 1 回答
- 0 关注
- 96 浏览
添加回答
举报
0/150
提交
取消