保存按钮以从 JavaScript 上传到“MySQL”

Question

        <table>
          <tr>
            <th>20.00 - 21.00</th>
            <?php if ($senin20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td class='$kelas'><span>"; echo $senin20; "</span></td>"; ?>
            <?php if ($selasa20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td class='$kelas'><span>"; echo $selasa20; "</span></td>"; ?>
            <?php if ($rabu20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td class='$kelas'><span>"; echo $rabu20; "</span></td>"; ?>
            <?php if ($kamis20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td class='$kelas'><span>"; echo $kamis20; "</span></td>"; ?>
            <?php if ($jumat20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td class='$kelas'><span>"; echo $jumat20; "</span></td>"; ?>
          </tr>
        </table>

        <script>
        // insert hidden input to each td element.
        document.querySelectorAll("table#timetable td").forEach(function(each) {
            let value = each.querySelector("span").innerText;
            each.innerHTML += `<input type="text" value="${value}" style="display: none;">`;

            // when user double click, hidden span and display input.
            each.addEventListener("dblclick", function(event) {
                each.querySelector("span").style.display = "none";
                each.querySelector("input").style.display = "initial";
                each.querySelector("input").focus();
            });

    // when user leave input (blur), hidden input and display span, and change span's innerText.
            each.querySelector("input").addEventListener("blur", function(event){
                each.querySelector("input").style.display = "none";
                each.querySelector("span").style.display = "initial";

                let value = each.querySelector("input").value;
                each.querySelector("span").innerText = value;
                });
            });
        </script>
        <br>

        <button id="save">Save</button>

    <br>

我想制作一个保存按钮，将 JavaScript 中 value 变量的输入保存到我的数据库中。

如何将JS中的value保存到PHP变量($senin20,$selasa20,$rabu20,$kamis20,$jumat20)并保存到数据库中？

Answer 1

你可以得到 HTML DOM 并使用 Ajax 将其发送到 db

var objdta={
 senin: document.getElementsByClassName("senin").value
}      
$.ajax({ 
                url:"save.php", 

                method:"POST", 

                data:objdta, 

                dataType:"json"});