我有一个问题...这里创建表的行每次用户按“添加”按钮时，我如何一次将表的所有数据发送到数据库，因为当按提交时仅将最后一行插入数据库而不是所有数据表，但它应该提交包含所有数据的所有行
我是 php 新手，所以我没有太多 php 代码 这是 php 代码
<?php
include_once("dbinfo.php");
session_start();
$name= $_SESSION['user'];
if(isset($_POST['savepav'])){
date_default_timezone_set("Asia/Riyadh");
$pavdate= date("Y/m/d");
$pavtime=date("h:i:sa");
$pavloca=$_POST['pavlocation'];
$pavtype=$_POST['ddlPassport'];
$pavdist=$_POST['pavedist'];
$pavplan=$_POST['pavplan'];
$pavseve=$_POST['pavseverity'];
echo "<script>alert(' Pavement data saved successfully ');</script>";
$query="INSERT INTO `pevement`(`userName`, `plocation`, `pavType`, `padistr`, `pavplan`, `severity`, `pavdate`, `pavtime`) VALUES ('$name' ,'$pavloca', '$pavtype', '$pavdist' ,'$pavplan', '$pavseve', '$pavdate' ,'$pavtime')";
$result_query=mysqli_query($conn,$query);
}
?>
这是脚本代码
<script>
function AddData() {
var rows = "";
var name = document.getElementById("locapavm").value;
var city = document.getElementById("sevepavm").value;
var plan = document.getElementById("planpavm").value;
rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>";
$(rows).appendTo("#list tbody");
}
function ResetForm() {
document.getElementById("person").reset();
}
function deleterow(el) {
$(el).closest('tr').remove();
}
</script>
和 HTML
<html>
<div id = "data">
<form id = "person">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-12" style="width: 1514px">
<select id = "locapavm" name = "pavlocation" style="width: 26%">
<option value="">- Location -</option>
<option value="Runway 17">Runway 17</option>
<option value="Runway 35">Runway 35</option>
<option value="Runway 18">Runway 18</option>
<option value="Runway 36">Runway 36</option>
</select><br>
<div class="col-12">
<select id = "ddlPassport" name = "ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
<option value="">- Pavement Type -</option>
<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
</select>
</div><br/>
<div class="col-12" style="width: 1514px">
<select id="pavdistrees" name="pavedist" style="width: 26%">
<option value="">- Distress selections - </option>
</select><br> </div>
<div class="col-12" style="width: 1514px">
<select id="sevepavm" name="pavseverity" style="width: 26%">
<option value="">- Severity -</option>
<option value="Low">Low</option>
<option value="Medium"> Medium</option>
<option value="High">High</option>
</select><br> </div>
<!----------------------------------------------------------------------->
<p class="auto-style1">Maintenance Plan:</p>
<textarea id="planpavm" name="pavplan" style="width: 572px; height: 129px" ></textarea><br>
<input id = "person" type = "reset" value = " Reset " onclick = "ResetForm()">
<input id = "button" type = "button" value = " Add " onclick = "AddData()">
</form>
</div>
<div id = "tab" style="width: 76%">
<table style="width: 96%" id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
<thead>
<tr>
<td>Location</td>
<td>Pavement Type</td>
<td>Type Distrees</td>
<td>Severity</td>
<td style="width: 396px">Maintenance Plan</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br><input type="submit" name="savepav" value="Submit"/>
</html>
最佳答案
我看到您正在使用 JQuery，因此基于此，我认为 XHR 将是您最好的选择。如果您使用“添加”按钮将其添加到表中，那么除了重定向到不同的页面之外，我并没有真正看到“提交”按钮的意义，因此我将在本示例中省略它，并且如果您有不同的计划，请稍后编辑我的答案。
您的 PHP 代码看起来不错，只是容易受到 SQL 注入(inject)攻击。为了防止这种情况，我将对您放入数据库中的所有字符串调用 mysql_real_escape_string 方法，如下所示:
$pavloca=mysql_real_escape_string($_POST['pavlocation']);
$pavtype=mysql_real_escape_string($_POST['ddlPassport']);
$pavdist=mysql_real_escape_string($_POST['pavedist']);
$pavplan=mysql_real_escape_string($_POST['pavplan']);
$pavseve=mysql_real_escape_string($_POST['pavseverity']);
对于 HTML，我会给您的 Add 按钮指定 submit 类型，然后添加 action 和 method 属性添加到您的打开表单标记中，如下所示:
<form id = "person" method = "POST" action = "/path/to/php/page">
其中 /path/to/php/page 是将所有内容添加到数据库的 PHP 页面的路径。
最后是 JavaScript。
我不会在 Add 按钮上添加 onclick 属性，而是将其删除，然后将这段 JQuery 添加到您的脚本标记中:
$("#person").submit(function(d){
d.preventDefault();
AddData(new FormData(d.target));
})
然后为您的 AddData 函数添加表单的输入参数:
function AddData(form)
P.S，完成此操作后，您可以使用一个小技巧，实际上可以通过 name 属性而不是 id 获取值，如下所示:
var name = form["pavlocation"];
var city = form["pavseverity"];
var plan = form["pavplan"];
最后但并非最不重要的一点是，将这一小段代码添加到 AddData() 函数的末尾:
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.send();
应该就是这样!
注意:我没有测试任何内容，因此我对任何拼写错误或语法错误表示歉意。如果这不起作用，我将相应地编辑我的答案。
编辑:您发布的 HTML 中有几个无序标签，因此我通过 IDE 运行它来清理它，并在此处为其创建了一个 JSFiddle:https://jsfiddle.net/djy9vget/2/
您必须将 action="/path/to/php/page.php" 位更改为实际路径，但除此之外，这应该可以工作。我还注意到我原来的答案中有一个拼写错误，其中 XmlHttpRequest(); 应该是 XMLHttpRequest();。
我还将Reset按钮的ID从person(与表单相同)更改为reset。
关于javascript - 如何一次将脚本中的所有表行插入数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57731271/