双击时更改表格的值

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>

  td, th {

    text-align: center;

    max-width:150px; 

    min-width:150px; 

    width:150px;

  }

</style>

<table id="editable" style="width:100%">

          <tr>

            <th> </th>

            <th>Senin</th>

            <th>Selasa</th>

            <th>Rabu</th>

            <th>Kamis</th>

            <th>Jumat</th>

          </tr>

          <tr>

            <th>06.00 - 07.00</th>

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

            echo "<td class='$kelas'><span>"; echo $senin06; "</span></td>"; 

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

            echo "<td class='$kelas'><span>"; echo $selasa06; "</span></td>"; 

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

            echo "<td class='$kelas'><span>"; echo $rabu06; "</span></td>"; 

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

            echo "<td class='$kelas'><span>"; echo $kamis06; "</span></td>"; 

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

            echo "<td class='$kelas'><span>"; echo $jumat06; "</span></td>"; ?>

          </tr>

</table>

<script>

  // insert hidden input to each td element.

  document.querySelectorAll("table#editable 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>

笔记：

1. 请尽量避免使用内联样式，它会覆盖所有 css 文件。

2. 我添加了一个 span 标签让 JavaScript 可以轻松识别什么是原始单词。

3. 这段代码仍然有很多部分可以更好。

4. 这不是立即保存更改的数据，建议您制作一个按钮以保存所有数据以上传数据库。

Answer 2

我不确定我做对了，但我认为你想要这个使用“ondblclick”事件

    <?php 

        $senin06 = "-";

        $selasa06 = "-";

        $rabu06 = "-";

        $kamis06 = "-";

        $jumat06 = "-";

        $senin07 = "-";

        $selasa07 = "-";

        $rabu07 = "-";

        $kamis07 = "-";

        $jumat07 = "-";

    ?>

    <style type="text/css">

        td { border: 1px solid #ccc; text-align: center; }

    </style>

    <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 ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin06; "</td>"; ?>

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

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

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

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

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

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

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

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

      </tr>

      <tr>

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

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

        echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin07; "</td>"; ?>

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

        echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $selasa07; "</td>"; ?>

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

        echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $rabu07; "</td>"; ?>

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

        echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $kamis07; "</td>"; ?>

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

        echo "<td ondblclick='editTD(this)' style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $jumat07; "</td>"; ?>

      </tr>

    </table>

    <script type="text/javascript">

        function editTD(clicked) {

          var x = clicked.getAttribute("class");

          if (x === "kosong") {

            clicked.innerHTML = "biasa"

            clicked.setAttribute("class", "biasa"); 

          } else {

            clicked.innerHTML = "kosong"

            clicked.setAttribute("class", "kosong"); 

          }

        }

    </script>