时间戳

首页 > 解决方案 > 更改 HTML 表中 td 元素的颜色，然后使用 AJAX 写入 DB

javascript - 更改 HTML 表中 td 元素的颜色，然后使用 AJAX 写入 DB

问题描述

我有一个从 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>

标签： javascriptphphtmlcssajax

解决方案

如果您能够稍微修改 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)
        })
}))

推荐阅读