所以这是我的情况；我正在尝试保存通过填写表格添加的表中的数据，我不知道如何使用 javascript 或 ajax 将其保存到 phpmyadmin 中的数据库中。一个示例代码非常感谢。谢谢! PS:我是一个初学者，我只是在网上搜索代码并尝试利用我得到的东西。请帮助:D
<html>
<body>
<div class = "inputfield">
<label>First Name:</label>
<input type="text" id="fname"><br>
<label>Last Name:</label>
<input type="text" id="lname"><br>
<label>Gender:</label>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select><br>
<label>HOURS:</label>
<input type="number" min=".5" max="12" step=".5" name="hours" id="hours" placeholder="--.5 to 12--"> <br>
</div>
<div class = "tablefield">
<table class="mtable" id="mtable">
<tr>
<th width="27%">First Name</th>
<th width="27%">Last Name</th>
<th width="15%">Gender</th>
<th width="15%">Hour</th>
<th width="16%">Edit</th>
</tr>
</table>
<table class="sumtable">
<tr><b>
<td class="sum">TOTAL HOURS</td>
<td class="sum1" id="sumtd"></td>
</b></tr>
</table>
</div>
<div class="buttons">
<button type = "button" onclick="add1('mtable')">ADD</button>
<button type = "reset" name="reset" class="btnclr">CLEAR</button>
<button type = "button" name="save" onclick="savefunc()">SAVE</button>
</div>
<input type = "hidden" name="hid1" id="hid1">
<input type = "hidden" name="hid2" id="hid2">
<input type = "hidden" name="hid3" id="hid3">
<input type = "hidden" name="hid4" id="hid4">
<script>
var sum = 0;
function add1(){
"use strict";
var hour1 = document.getElementById("hours").value;
sum = parseFloat(sum)+ parseFloat(hour1);
document.getElementById("sumtd").innerHTML = sum;
var table = document.getElementById("mtable"),rindex2;
var rowCount = table.rows.length;
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var element1 = document.createElement("Button");
element1.type = "button";
element1.name = "btnedit";
element1.innerHTML = "Update";
element1.setAttribute('class','btnedit');
var element2 = document.createElement("Button");
element2.type = "button";
element2.name = "btndel";
element2.innerHTML = "Delete";
element2.setAttribute('class','btndel');
for(var i=0; i<rowCount; i++) {
element1.onclick = function () {
try {
rindex2 = this.parentNode.rowIndex;
sum = parseFloat(sum) - parseFloat(table.rows[rindex2].cells[3].innerHTML);
console.log(rindex2);
this.parentNode.cells[0].innerHTML = document.getElementById("fname").value;
this.parentNode.cells[1].innerHTML = document.getElementById("lname").value;
this.parentNode.cells[2].innerHTML = document.getElementById("gender").value;
this.parentNode.cells[3].innerHTML = document.getElementById("hours").value;
sum = parseFloat(sum) + parseFloat(document.getElementById("hours").value);
document.getElementById("sumtd").innerHTML = sum;
}catch(e){
alert(e);
}};
element2.onclick = function () {
try {
rindex2 = this.parentNode.rowIndex;
console.log(rindex2);
sum = parseFloat(sum) - parseFloat(table.rows[rindex2].cells[3].innerHTML);
document.getElementById("sumtd").innerHTML = sum;
table.deleteRow(rindex2);
}catch(e){
alert(e);
}};
}
td1.innerHTML = document.getElementById("fname").value;
td2.innerHTML = document.getElementById("lname").value;
td3.innerHTML = document.getElementById("gender").value;
td4.innerHTML = document.getElementById("hours").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(element1);
row.appendChild(element2);
table.children[0].appendChild(row);
}
function savefunc(){
var table1 = document.getElementById("mtable");
var hid1 = document.getElementById("hid1").value;
var hid2 = document.getElementById("hid2").value;
var hid3 = document.getElementById("hid3").value;
var hid4 = document.getElementById("hid4").value;
for (var r = 1, n = table1.rows.length; r < n; r++){
var c0 = table1.rows[r].cells[0].innerHTML;
var c1 = table1.rows[r].cells[1].innerHTML;
var c2 = table1.rows[r].cells[2].innerHTML;
var c3 = table1.rows[r].cells[3].innerHTML;
var c4 = table1.rows[r].cells[4].innerHTML;
hid1 = c0;
hid2 = c1;
hid3 = c2;
hid4 = c3;
console.log(hid1);
console.log(hid2);
console.log(hid3);
console.log(hid4);
}
}
</script>
</body>
</html>最佳答案
我已经弄清楚了。我只是将它包含在我的循环语句的底部并添加了一个 save.php 文件。以此为引用https://www.studentstutorial.com/ajax/insert-data
$.ajax({
url: "save.php",
type: "POST",
data: {
fname: hid1,
lname: hid2,
gender: hid3,
hour: hid4
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
alert("Save Successful!");
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
}
});关于javascript - 如何将添加的数据从 HTML 表保存到 SQL (PHPMYADMIN)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59560196/