ajax - 如何将左连接值添加到 ajax 中生成的 html 表

Question

我有以下脚本，它生成一个 html 表，并允许用户在使用复选框选中时更新表行。他们可以检查该行而不是更改值或取消选中该行。当用户打开页面时，脚本的第一行显示表格和行。

这是用户在打开页面时看到的脚本的一部分。我使用 leftjoin 中的 cat_name 作为类别的值，使用 left join 中的 cat_color 为行中 tekst 的字体着色。我有 if 语句来声明存储值背后的正确名称。

   function fetch_data()
    {
        $.ajax({
            url:"select_accounts.php",
            method:"POST",
            dataType:"json",
            success:function(data)
            {
                var html = '';
                for(var count = 0; count < data.length; count++)
                {var purpose = data[count].purpose;
    if(purpose == "BFH") purpose = "Holders";
    else if(purpose == "CAS") purpose = "Ranking";
    else if(purpose == "aa") purpose = "Admin Account";

                
                    html += '<tr >';
                    html += '<td class=\"footer\"><input type="checkbox"  id="'+data[count].id+'" data-name="'+data[count].name+'"  data-category="'+data[count].category+'"  data-door="'+data[count].door+'" data-purpose="'+data[count].purpose+'" class="check_box"  /></td>';
                    html += '<td style="color:'+data[count]['cat_color']+' " class=\"footer\">'+data[count].name+'</td>';
                   
                    
                   
                    html += '<td style="color:'+data[count]['cat_color']+' " class=\"footer\">'+data[count].cat_name+'</td>';
                    html += '<td style="color:'+data[count]['cat_color']+' " class=\"footer\">'+purpose+'</td>';
                    </tr>';
                }
                $('tbody').html(html);
            }
        });
    }

    fetch_data();

现在我的问题。我想对用户取消选中复选框时看到的表格做同样的事情。但我似乎无法让这个工作。这是用户取消选中复选框后看到的脚本部分；

html = '<td class=\"footer\"><input type="checkbox" id="'+$(this).attr('id')+'" data-name="'+$(this).data('name')+'"  data-category="'+$(this).data('category')+'" data-purpose="'+$(this).data('purpose')+'"  class="check_box" /></td>';
            html += '<td class=\"footer\">'+$(this).data('name')+'</td>';
           
            html += '<td class=\"footer\">'+$(this).data('category')+'</td>';
            html += '<td class=\"footer\">'+$(this).data('purpose')+'</td>'
            </tr>';
                       
        }
        $(this).closest('tr').html(html);
        $('#rang_'+$(this).attr('id')+'').val($(this).data('rang'));
        $('#category_'+$(this).attr('id')+'').val($(this).data('category'));
        $('#purpose_'+$(this).attr('id')+'').val($(this).data('purpose'));
     
    });

这是选择帐户的查询；

$query = "SELECT a.*, c.cat_color, c.cat_name, c.cat_txt FROM account a LEFT JOIN categories c ON c.cat_ID = a.category 
        WHERE `betaald` = 'Yes' AND `door` = '$usernaam' 
        ";
 
 
 
$statement = $connect->prepare($query);

if($statement->execute())
{
 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row;
 }

 echo json_encode($data);
}

标签： ajaxpdo