使用 PHP 和 Jquery 在模态文本框中显示值
我正在尝试使用 PHP 和 JQuery 将 SQL 数据库中的值显示到文本框中。正在检索这些值，但不会显示在文本框中。我究竟做错了什么？
<?php
require '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回答
-
梵蒂冈之花
您的表结构无效。此外，您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>
随时随地看视频慕课网APP
PHP