亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

雙擊時更改表格的值

雙擊時更改表格的值

蝴蝶不菲 2022-07-21 21:25:30
我有一個看起來像這樣的表：<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知道怎么做嗎？
查看完整描述

2 回答

?
撒科打諢

TA貢獻1934條經驗 獲得超2個贊

這段代碼很糟糕......但我認為你可能是初學者。


所以，這是我的答案：



<?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. 這不是立即保存更改的數據，建議您制作一個按鈕以保存所有數據以上傳數據庫。


查看完整回答
反對 回復 2022-07-21
?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

我不確定我做對了，但我認為你想要這個使用“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>



查看完整回答
反對 回復 2022-07-21
  • 2 回答
  • 0 關注
  • 94 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號