[英]How to save added data from HTML Table to SQL (PHPMYADMIN)
所以這是我的情況； 我正在嘗試保存通過填寫表單添加的表中的數據，我不知道如何使用 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 !"); } } });
如何使用C＃將動態添加的行中的數據保存到（csv / txt）文件到HTML表格？
[英]How to save data to a (csv/txt) file from dynamically added rows to a HTML table using C#?
如何將數據從HTML表單保存到WordPress中的數據庫表？
[英]How to save data from an HTML form to a database table in WordPress?
如何從HTML表中恢復使用ngFor指令動態添加的標頭單元格數據
[英]How to recover header cell data from HTML table which are dynamically added with ngFor directive
如何在asp .net core中導入csv文件並在html表上顯示數據然后保存在sql數據庫中
[英]How to import csv file and display the data on html table then save on sql database in asp .net core
如何通過請求將數據添加到另一HTML頁面的行中來向一個HTML頁面的表中添加行（可能使用“提示”和javascript）？
[英]How to add rows to table in one HTML page by asking for data to be added into rows from another HTML page (may be using “prompt” & javascripts)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.