我有一个HTML表，它通过带有SQL语句的PHP代码段动态加载其值。还有一个Select和一个按钮可以向表中添加行。此按钮由ajax过程监听，以将数据发送到php并将新行作为记录插入数据库中。我当然希望表（不是所有页面）刷新信息。为此，我使用jquery（$）。load函数。一切都运行良好，数据库更新，但HTML表刷新时显示为空。我做错了什么？
这是HTML表格：
<!-- Procedure Table-->
<div id=idProcedimientos class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Procedures <small></small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<div class="form-group">
<div class="col-md-2 col-sm-6 col-xs-12">
<? $qProcedure = "SELECT * FROM Procedures";
$resultsProcedure = mysqli_query($db, $qProcedure);
echo "<select id='idSelected_procedure' name='selected_procedure' class='form-control'>";
while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)) {
echo"<option value ='{$rowProcedure['IdProcedure']}'>{$rowProcedure['Name']}</option>";
};
echo "</select><br />";
?>
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-6 col-xs-12">
<button type="submit" id="idBttnProcedure-add" class="bttnProcedure-add btn btn-round btn-primary">Add Procedure</button><br /><br />
</div>
</div>
<div id="idProcedureTable" class="table-editable">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Procedure</th>
<th>Date</th>
<th>Ok</th>
<th>Summary</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<?
$queryProcedure = "SELECT FoalingsP.IdFoaling, Procedures.Name, JournalProcedures.IdJournalFk, FoalingsP.Date, FoalingsP.Ok,
FoalingsP.Summary FROM FoalingsP, Procedures, JournalProcedures
WHERE
JournalProcedures.IdJournalFk=$row[IdJournal] AND
JournalProcedures.IdJournalProcedure=FoalingsP.IdJournalProcedureFk AND
JournalProcedures.IdProcedureFk=Procedures.IdProcedure
UNION
SELECT UltrasonographiesP.IdUltrasonography, Procedures.Name, JournalProcedures.IdJournalFk, UltrasonographiesP.Date,
UltrasonographiesP.Ok, UltrasonographiesP.Summary FROM UltrasonographiesP, Procedures, JournalProcedures
WHERE
JournalProcedures.IdJournalFk=$row[IdJournal] AND
JournalProcedures.IdJournalProcedure=UltrasonographiesP.IdJournalProcedureFk AND
JournalProcedures.IdProcedureFk=Procedures.IdProcedure";
$resultsProcedure = mysqli_query($db, $queryProcedure);
while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)){
echo " <tr><td>{$rowProcedure['Name']}</td>
<td>{$rowProcedure['Date']}</td>";
if($rowProcedure["Ok"]=="1") {echo "<td contenteditable='true'><label><input type='checkbox' checked></label></td>";};
if($rowProcedure["Ok"]=="0") {echo " <td contenteditable='true'><label><input type='checkbox'></label></td>";};
echo "<td>{$rowProcedure['Summary']}</td>
<td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td></tr>";
};
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Procedure Table-->
以下是剧本：
<script>
$('.bttnProcedure-add').click(function () {
var idJournal = "<?php echo $row[IdJournal]; ?>";
var idSelected_procedure = document.getElementById("idSelected_procedure").value;
alert(idSelected_procedure);
$.ajax({
type: "POST",
url: "server.php",
data: {mare_idJournal:idJournal,
mare_idSelected_procedure:idSelected_procedure
},
success: function(msg){
alert("Everything saved correctly");
$("#datatable-responsive").load("control_horse_journal.php #datatable-responsive");
}
});
return false;
});
</script>
非常感谢。
答案 0 :(得分：0)
感谢@epascarello的建议。我得到了解决方案。我放弃了.load函数，而是用.after直接添加了一行。最终的脚本是这样的：
<script type="text/javascript">
$('.bttnProcedure-add').click(function () {
var idJournal = "<?php echo $row[IdJournal]; ?>";
var idSelected_procedure = document.getElementById("idSelected_procedure").value;
var $TABLE_PROCEDURES = $('#idProcedureTable');
var selectedProcedure = document.getElementById("idSelected_procedure");
var name = selectedProcedure.options[selectedProcedure.selectedIndex].text;
var rowP="<tr>"
+"<td>" +name+"</td>"
+"<td>"+"0000-00-00 00:00:00"+"</td>"
+"<td contenteditable='true'><label><input type='checkbox'></label></td>"
+"<td>"+""+"</td>"
+"<td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td>"
+"</tr>";
$('#bodyTbProcedure tr:last').after(rowP);
$.ajax({
type: "POST",
url: "server.php",
data: {mare_idJournal:idJournal,
mare_idSelected_procedure:idSelected_procedure
},
success: function(msg){
alert("Everything saved correctly");
//$("#datatable-responsive").load("control_horse_journal.php #datatable-responsive");
}
});
return false;
});
</script>