更改HTML表中td元素的顏色，然后使用AJAX寫入資料庫

我有一個從 MYSQl 資料庫中檢索到的結果表，每個 TR 都有一個唯一的 ID 和類。當連續點擊 TD 時，腳本會根據訂單狀態切換各種顏色，然后使用 AJAX 將每個切換寫回資料庫。我遇到的問題是顏色更改了最后一個表格行 td 而不是當前單擊的行 td??。我是 JS 和 Jquery 的菜鳥，并且讀到問題可能是“提升”，這讓我困惑了幾天。任何幫助是極大的贊賞。

<td id="<?php echo $row[ 'order_id' ]; ?>" class="<?php echo $row[ 'order_id' ]; ?> white"
    onclick="changeBackground(this.id)"><?php echo $row[ 'order_id' ]; ?></td>

<script>
  function getSelected() {
    return document.getElementsByClassName(<?php echo $row[ 'order_id' ]; ?>);
  }

  function changeBackground(id) {
    var all = getSelected();
    var x = id
    alert(x);
    for (var i = 0; i < all.length; i  ) {
      var color = all[i].classList;
      
      if (color.contains("white")) {
        all[i].classList.add("red");
        all[i].classList.remove("white");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 2},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("red")) {
        all[i].classList.add("green");
        all[i].classList.remove("red");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 3},
          success: function (data) {
            console.log(data);
          },
        });

      } else if (color.contains("green")) {
        all[i].classList.add("pink");
        all[i].classList.remove("green");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 4},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("pink")) {
        all[i].classList.add("yellow");
        all[i].classList.remove("pink");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 5},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("yellow")) {
        all[i].classList.add("white");
        all[i].classList.remove("yellow");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 1},
          success: function (data) {
            console.log(data);
          },
        });
      }

    }
  }
</script>

uj5u.com熱心網友回復：

如果您能夠稍微修改 HTML 輸出，我相信上面的 Javascript 可以顯著簡化，但我應該強調以下內容未經測驗。在order_id似乎分配給元素的類內奇-大概是一個整數，它是不是有效的，也為一類-或許，如果這是指定的dataset屬性會更有意義，并仍然可以在你的JavaScript代碼，如果需要參考。將類簡單地設定為您回圈的各種顏色之一會有所幫助！

所以，也許像這樣改變 HTML：

<td data-id="<?php echo $row['order_id'];?>" class="white">
    <?php echo $row['order_id'];?>
</td>

然后是 Javascript

const matrix={
    'white':'red',
    'red':'green',
    'green':'pink',
    'pink':'yellow',
    'yellow':'white'
};

document.querySelectorAll('table td').forEach( td=>td.addEventListener('click',function(e){
    let id=this.dataset.id;
    let colour=this.className;
    let keys=Object.values( matrix );
    
    this.classList.remove( colour );
    this.classList.add( matrix[ colour ] );
    
    
    
    let fd=new FormData();
        fd.set('color', keys.indexOf( colour) );
        fd.set('id',id);
        
    fetch( 'update_color.php',{ method:'post',body:fd} )
        .then(r=>r.text())
        .then(text=>{
            console.log(text)
        })
}))

標籤：javascript php html css 阿贾克斯

上一篇：表單提交后PHP保持輸入型別=日期值

下一篇：為什么在這種情況下左右浮動不起作用？[復制]