Change value of table when double click - Phpmyadmin

Ilham
April 29, 2020
224 views
0 votes
2 Answers

I have a table that looks like this :

<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>
   <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 style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $senin07; "</td>"; ?>
      <?php if ($selasa07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $selasa07; "</td>"; ?>
      <?php if ($rabu07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $rabu07; "</td>"; ?>
      <?php if ($kamis07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $kamis07; "</td>"; ?>
      <?php if ($jumat07 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
            echo "<td style='max-width:150px; min-width:150px; width:150px;' class='$kelas'>"; echo $jumat07; "</td>"; ?>
   </tr>
</table>

I want to change the value inside the td element when the user double click on it. The table contain variables that connected to PHPMyAdmin, any idea how to do it?

Answers

This code is horrible… but I think you may a beginner.

So, here is my answer:


<?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>

NOTE:

Please try to avoid inline-style, it will overwrite all css files.
I add a span tag let JavaScript can easily identify what is original word.
This code still have ton of parts can be better.
This is not save changed data immediately, recommended you make a button for save all data to upload database.

I’m not sure I got it right, but I think you want this
Use “ondblclick” Event

    <?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>

Please signup or login to give your own answer.

Click here to cancel reply.

Change value of table when double click – Phpmyadmin

Answers