将td的背景颜色更改为成功或危险

Question

这是我的PHP，我希望这个td（ order_status ）将背景颜色更改为green or success如果订单已delivered ，并将背景颜色更改为danger or red如果订单被canceled 。

<?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;
    }
?>

这是我的表格

<form class="form-horizontal" id="main-form" action="PHP_groceryReleasingProcess.php" method="POST">
    <table class="tablesorter table table-bordered table-condensed" id="cLoanOut" style="table-layout: fixed;">
        <colgroup>
            <col width="110">
            <col width="130">
            <col width="50">
            <col width="60">
            <col width="90">
        </colgroup>
        <thead>
            <tr>
                <th>Date Ordered</th>
                <th>Order No.</th>
                <th>Total Item(s)</th>
                <th>Total Amount</th>
                <th>Order Status</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button id="Approve" role="button" class="btn btn-success" disabled>Approve Order</button>
    <button id="Cancel" role="button" class="btn btn-danger" disabled>Cancel Order</button>
</form>

而我的javacript ajax电话

$("#Approve").click(function(e) {
    e.preventDefault();
    var id = $('#cLoanOut tr.active').attr('id');
    bootbox.confirm("Are you sure you want to approve 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:"Approve"
                },
                success:function(result){
                    bootbox.alert('Order Approved',function(){
                    $("#Approve").attr("disabled", true);
                    });
                    updateTable();
                }
            });   
        } else {

        }
    });
});
$("#Cancel").click(function(e) {
    e.preventDefault();
    var id = $('#cLoanOut tr.active').attr('id');
    bootbox.confirm("Are you sure you want to cancel 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:"Cancel"
                },
                success:function(result){
                    bootbox.alert("Order Cancelled",function(){
                    $("#Cancel").attr("disabled", true);
                    });
                    updateTable();
                }
            });   
        } else {

        }
    });
});

如果我点击Approve Order button ， order_status的数据即td（ Pending ）将更改为Delivered ，如果我单击Cancel Order button ，它将更改为Cancelled 。

如果成功，我想在订单被approved/delivered将该td的background color更改为success/green 。 如果canceled ，将background color更改为danger/red 。

感谢您的帮助谢谢。

看起来像这样。 单击时，每个tr都有一个活动类。

Date Ordered         Order No.     Total item(s) Total Amount   Order Status
 09-11-2015      15-09-0000000001        3          213.85        Pending
 09-11-2015      15-09-0000000002        1          130.00       Delivered
 09-11-2015      15-09-0000000003        2          134.07        Pending
 09-11-2015      15-09-0000000004        4          846.41       Cancelled

       <button>Approve Order</button> <button>Cancel Order</button>

我的updateTable();脚本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.');
        }
    });
}

我在表格中加了css

.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;
}

如果对我的td（ order_status ）是真的，我如何调用Delivered success和Cancelled danger ？

Answer 1

首先，您需要向状态顺序的<td id="xxx">添加特定ID，然后您可以在jquery中使用相同的ID来添加相应的背景颜色并将文本更改为“已传递或取消”。

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

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

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

Answer 2

你的PHP循环中有这样的东西：

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

您根据$ order_status将类设置为TR。 然后在你的CSS中：

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

Answer 3

您可以简化此操作，而不是点击两次并使用相同的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 {

        }
    });
});

---

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

1. 表单上下文中的按钮选择器。 $("#main-form button") ，可让您点击两个按钮。
2. var $this = $(this); 您可以使用一个变量，稍后将在回调中使用该变量，如error:fn, success:fn, complete:fn 。
3. this.id.toLowerCase()允许您为两个按钮提供动态弹出消息。
4. todo:this.id我们正在传递点击按钮的ID。

5. var msg = result === "Approved" ? "Order Approved" : "Order Cancelled"; 如果从php返回特定文本，则此行可用于两个按钮消息。

6. $this.prop("disabled", true); 这里是$this是我们缓存它时点击的按钮，并使用.prop()方法来更改任何属性，如disabled, checked etc. 。

7. 添加complete回调以向tds添加类。 你可以在片段中看到。

在这个答案中， 5可能会出现一些问题。