双击时更改表格的值

Question

我有一个看起来像这样的表：

<table style="width:100%">

   <tr>

      <th style="max-width:150px; min-width:150px; width:150px;"> </th>

      <th style="max-width:150px; min-width:150px; width:150px;">Senin</th>

      <th style="max-width:150px; min-width:150px; width:150px;">Selasa</th>

      <th style="max-width:150px; min-width:150px; width:150px;">Rabu</th>

      <th style="max-width:150px; min-width:150px; width:150px;">Kamis</th>

      <th style="max-width:150px; min-width:150px; width:150px;">Jumat</th>

   </tr>

   <tr>

      <th style="max-width:150px; min-width:150px; width:150px;">06.00 - 07.00</th>

      <?php if ($senin06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}

            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin06; "</td>"; ?>

      <?php if ($selasa06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}

            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $selasa06; "</td>"; ?>

      <?php if ($rabu06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}

            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $rabu06; "</td>"; ?>

      <?php if ($kamis06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}

            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $kamis06; "</td>"; ?>

      <?php if ($jumat06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}

            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $jumat06; "</td>"; ?>

   </tr>

当用户双击它时，我想更改 td 元素内的值。该表包含连接到的变量，PHPMyAdmin知道怎么做吗？

Answer 1

这段代码很糟糕......但我认为你可能是初学者。所以，这是我的答案：<?php$senin06 = "-";$selasa06 = "-";$rabu06 = "-";$kamis06 = "-";$jumat06 = "X";?><style>&nbsp; td, th {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; max-width:150px;&nbsp;&nbsp; &nbsp; min-width:150px;&nbsp;&nbsp; &nbsp; width:150px;&nbsp; }</style><table id="editable" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th> </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Senin</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Selasa</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Rabu</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Kamis</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Jumat</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>06.00 - 07.00</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if ($senin06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td class='$kelas'><span>"; echo $senin06; "</span></td>";&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($selasa06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td class='$kelas'><span>"; echo $selasa06; "</span></td>";&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($rabu06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td class='$kelas'><span>"; echo $rabu06; "</span></td>";&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($kamis06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td class='$kelas'><span>"; echo $kamis06; "</span></td>";&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($jumat06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td class='$kelas'><span>"; echo $jumat06; "</span></td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr></table><script>&nbsp; // insert hidden input to each td element.&nbsp; document.querySelectorAll("table#editable td").forEach(function(each){&nbsp; &nbsp; let value = each.querySelector("span").innerText;&nbsp; &nbsp; each.innerHTML += `<input type="text" value="${value}" style="display: none;">`;&nbsp; &nbsp; // when user double click, hidden span and display input.&nbsp; &nbsp; each.addEventListener("dblclick", function(event){&nbsp; &nbsp; &nbsp; each.querySelector("span").style.display = "none";&nbsp; &nbsp; &nbsp; each.querySelector("input").style.display = "initial";&nbsp; &nbsp; &nbsp; each.querySelector("input").focus();&nbsp; &nbsp; });&nbsp; &nbsp; // when user leave input (blur), hidden input and display span, and change span's innerText.&nbsp; &nbsp; each.querySelector("input").addEventListener("blur", function(event){&nbsp; &nbsp; &nbsp; each.querySelector("input").style.display = "none";&nbsp; &nbsp; &nbsp; each.querySelector("span").style.display = "initial";&nbsp; &nbsp; &nbsp; let value = each.querySelector("input").value;&nbsp; &nbsp; &nbsp; each.querySelector("span").innerText = value;&nbsp; &nbsp; });&nbsp; });</script>笔记：请尽量避免使用内联样式，它会覆盖所有 css 文件。我添加了一个 span 标签让 JavaScript 可以轻松识别什么是原始单词。这段代码仍然有很多部分可以更好。这不是立即保存更改的数据，建议您制作一个按钮以保存所有数据以上传数据库。

Answer 2

我不确定我做对了，但我认为你想要这个使用“ondblclick”事件&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $senin06 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $selasa06 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $rabu06 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $kamis06 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $jumat06 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $senin07 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $selasa07 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $rabu07 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $kamis07 = "-";&nbsp; &nbsp; &nbsp; &nbsp; $jumat07 = "-";&nbsp; &nbsp; ?>&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; &nbsp; &nbsp; td { border: 1px solid #ccc; text-align: center; }&nbsp; &nbsp; </style>&nbsp; &nbsp; <table style="width:100%">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;"> </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">Senin</th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">Selasa</th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">Rabu</th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">Kamis</th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">Jumat</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">06.00 - 07.00</th>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($senin06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin06; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($selasa06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $selasa06; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($rabu06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $rabu06; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($kamis06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $kamis06; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($jumat06 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $jumat06; "</td>"; ?>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th style="max-width:150px; min-width:150px; width:150px;">07.00 - 08.00</th>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($senin07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin07; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($selasa07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $selasa07; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($rabu07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $rabu07; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($kamis07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $kamis07; "</td>"; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ($jumat07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}&nbsp; &nbsp; &nbsp; &nbsp; echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $jumat07; "</td>"; ?>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; function editTD(clicked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = clicked.getAttribute("class");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x === "kosong") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicked.innerHTML = "biasa"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicked.setAttribute("class", "biasa");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicked.innerHTML = "kosong"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicked.setAttribute("class", "kosong");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>