Javascript 更改td'；成功或危险的背景色

这是我的php，我希望td（

order\u status

）将背景色更改为

绿色或success

（如果订单已

交付

），并将背景色更改为

危险或红色（如果订单已
取消
）

<?php
    if(!session_id()){
        session_start();
    }
    include_once '../fileadmin/dbinit.php';
    $todo = $_POST['todo'];
    $con = mysql_connect("localhost","root","","atec_coop");
    if (!$con){
        die("Can't connect".mysql_error());
    }
    mysql_select_db("atec_coop",$con);
    switch ($todo) {
        case "display":
            $sql = "SELECT * from tb_empgroc_master";
            $result = $atecCoop->query($sql);

            $html = ''; $ctr = 0;
            if ($result->num_rows){
                while ($row = $result->fetch_object()){
                $id = $row->empgrocmstID;
                $date_ordered = date("m-d-Y");
                $order_no = date($row->order_no);
                $total_items = number_format($row->total_items);
                $total_amount = number_format($row->total_amount,2);
                $order_status = wordwrap($row->order_status);

                $html .= "<tr id='$id'>";
                $html .= "<td class='date_ordered' style='text-align:center'>$date_ordered</td>";
                $html .= "<td class='order_no' style='text-align:center'>$order_no</td>";
                $html .= "<td class='total_items' style='text-align:right'>$total_items</td>";
                $html .= "<td class='total_amount' style='text-align:right'>$total_amount</td>";
                $html .= "<td class='order_status' style='text-align:center'>$order_status</td>";
                $html .= "</tr>";
                }
            }
            echo $html;
        break;
        case "Cancel":
            $Cancelquery = "UPDATE tb_empgroc_master SET order_status='Cancelled' WHERE empgrocmstID='".$_POST['empgrocmstID']."'";
            mysql_query($Cancelquery, $con);
        break;
        case "Approve":
            $Approvequery = "UPDATE tb_empgroc_master SET order_status='Delivered' WHERE empgrocmstID='".$_POST['empgrocmstID']."'";
            mysql_query($Approvequery, $con);
        break;
    }
?>

我的
updateTable（）脚本

如果符合我的td（
order\u status
），我如何调用
success
，调用
Delivered
和
danger
，调用

$html .= '<tr id="$id" class="'. ($order_status == 'cancel' ? 'cancel' : 'approved') .'">';

首先，您需要将特定id添加到状态订单的
，然后您可以在jquery中使用相同的id添加相应的背景色，并将文本更改为“已交付或取消”

您需要在ajax调用成功事件上执行此过程

$("#xxx").css("background-color", "green");
$("#xxx").css("background-color", "red");

$("#xxx").html("Delivered");
$("#xxx").html("Cancel");

您可以简化这一过程，而不是单击两次并使用相同的ajax：

$("#main-form button").click(function(e) {
    e.preventDefault();
    var $this = $(this); // cache the clicked button here
    var id = $('#cLoanOut tr.active').attr('id');
    bootbox.confirm("Are you sure you want to "+ this.id.toLowerCase() +" order?","No","Yes",function(r){
        if(r) {
            $.ajax({  
                url : "<?php echo $server_name; ?>/emcis_coopmain/process/PHP_groceryReleasingProcess.php",
                type : "POST",
                async : false,
                data : {
                    empgrocmstID:id,
                    todo:this.id // pass the button id here Approve/Cancel
                },
                success:function(result){
                    var msg = result === "Approved" ? "Order Approved" : "Order Cancelled";
                    bootbox.alert(msg, function(){
                       $this.prop("disabled", true); // use prop 
                    });
                    updateTable();
                },
                complete:function(){
                   $('#cLoanOut tr').each(function(){
                      $(this).find('td').last().addClass(function(){
                          if(this.textContent.trim() === "Cancelled"){
                              return "danger";
                          }else if(this.textContent.trim() === "Delivered"){ 
                              return "success";
                          }
                      });
                   });
                }
            });   
        } else {

        }
    });
});

$（“#主窗体按钮”）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；//将单击的按钮缓存在此处
var id=$（'cLoanOut tr.active'）.attr（'id'）；
bootbox.confirm（“您确定要”+this.id.toLowerCase（）+“order？”，“否”，“是”，函数（r）{
if（r）{
$.ajax（{
url:“/emcis_coopmain/process/PHP_groceryReleasingProcess.PHP”，
类型：“POST”，
async:false，
数据：{
empgrocmstID:id，
todo:this.id//在此处传递按钮id批准/取消
},
成功：功能（结果）{
var msg=result==“已批准”？“订单已批准”：“订单已取消”；
警报（消息，函数（）{
$this.prop（“disabled”，true）；//使用prop
});
updateTable（）；
},
完成：函数（）{
$（'#cLoanOut tr'）。每个（函数（）{
$（this）.find（'td'）.last（）.addClass（函数（）{
if（this.textContent.trim（）=“已取消”）{
返回“危险”；
}else if（this.textContent.trim（）=“已交付”）{
返回“成功”；
}
});
});
}
});   
}否则{
}
});
});


在上面的片段中，我改变了什么：

表单上下文中的按钮选择器<代码>$（“#主窗体按钮”）
，您可以单击这两个按钮
var$this=$（this）
您可以使用一个变量，该变量稍后将在回调中使用，如
error:fn、success:fn、complete:fn
this.id.toLowerCase（）
可以为两个按钮提供动态弹出消息
todo:this.id
我们正在传递单击按钮的id
var msg=result==“已批准”？“订单已批准”：“订单已取消”

$this.prop（“disabled”，true）
此处
$此
是我们缓存它时单击的按钮，并使用
.prop（）
方法更改任何属性，如
禁用、选中等。

添加
complete
回调以将类添加到tds。您可以在代码段中看到这一点
在这个答案中，5是您可能遇到的一些问题。
您能提供您的JSF代码吗？我已经编辑了我的文章@WisdmLabs@Micaela在两个ajax上成功的
结果是什么？ahm..如果表被批准，它将从挂起更新为已交付，如果被取消，它将更新表。对不起，如果我不明白你的问题@Jai@Micaela当您进行ajax调用时，您从php端回显了什么。是像
success
还是
cancel
。
order\u status
的数据已确定。请编辑您的评论并为我执行。。我已经试过了，但我不知道如何在
todo:this
中传递按钮id，而且我不理解这里单击的按钮的缓存。抱歉，我是编程新手，我尝试过这个
todo:this.$（“#Approve Cancel”）
//是这样吗？@Micaela
this.id
表示您不必显式执行任何操作。未捕获范围错误：超出了最大调用堆栈大小。^这意味着在代码中的某个地方，您正在调用一个函数，该函数反过来调用另一个函数，以此类推，直到达到调用堆栈限制。如果我将id放入td中，td的颜色不会更改，则会出错<代码>$html.=“$order\U status”是应使用单引号$html。=“$order\U status”；如果它有效，请采取步骤接受回答。它有效，但只会改变第一行的颜色。如果我批准了另一行，则第一行会更改，并且颜色会因updateTable（）而闪烁；但如果我把它拿走。颜色保持不变
function updateTable(){
//                $tbody = $('#cLoanOut tbody'),
//                url = $('#main-form').attr('action');
//                $.post("PHP_groceryReleasingProcess.php",{todo:"display"},function(response){
//                    $('.progress').hide();
//                    $tbody.html(response);
//                    $table.trigger('update');
//                },'html');
    var dataString = "todo=display";
    $.ajax({
        type: "POST",
        url: "<?php echo $server_name; ?>/emcis_coopmain/process/PHP_groceryReleasingProcess.php",
        data: dataString,
        success: function(sg){
            $("#cLoanOut tbody").empty();
            $("#cLoanOut").find('tbody').append(sg).trigger('update');
        },
        complete: function(){
            $('.progress').hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            bootbox.alert('Search Failed.');
        }
    });
}

.table-hover > tbody > tr > td.danger:hover {
     background-color: red !important;
}
.table-hover > tbody > tr > td.warning:hover {
     background-color: yellow !important;
}
.table-hover > tbody > tr > td.success:hover {
     background-color: green !important;
}

$html .= '<tr id="$id" class="'. ($order_status == 'cancel' ? 'cancel' : 'approved') .'">';

tr.cancel td {
    background: red;
}
tr.approved td {
    background: green;
}

$("#xxx").css("background-color", "green");
$("#xxx").css("background-color", "red");

$("#xxx").html("Delivered");
$("#xxx").html("Cancel");

$("#main-form button").click(function(e) {
    e.preventDefault();
    var $this = $(this); // cache the clicked button here
    var id = $('#cLoanOut tr.active').attr('id');
    bootbox.confirm("Are you sure you want to "+ this.id.toLowerCase() +" order?","No","Yes",function(r){
        if(r) {
            $.ajax({  
                url : "<?php echo $server_name; ?>/emcis_coopmain/process/PHP_groceryReleasingProcess.php",
                type : "POST",
                async : false,
                data : {
                    empgrocmstID:id,
                    todo:this.id // pass the button id here Approve/Cancel
                },
                success:function(result){
                    var msg = result === "Approved" ? "Order Approved" : "Order Cancelled";
                    bootbox.alert(msg, function(){
                       $this.prop("disabled", true); // use prop 
                    });
                    updateTable();
                },
                complete:function(){
                   $('#cLoanOut tr').each(function(){
                      $(this).find('td').last().addClass(function(){
                          if(this.textContent.trim() === "Cancelled"){
                              return "danger";
                          }else if(this.textContent.trim() === "Delivered"){ 
                              return "success";
                          }
                      });
                   });
                }
            });   
        } else {

        }
    });
});