保存按钮以从 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>

I want to make a save button that saves the input of the value variable in the JavaScript to my database.

How to save the value from JS to PHP Variable( $senin20 , $selasa20 , $rabu20 , $kamis20 , $jumat20 ) and save it to the database?

Answer 1

youb can get HTML DOM and Send it to db With Ajax

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

                method:"POST", 

                data:objdta, 

                dataType:"json"});