改变TD的背景颜色是成功还是危险

这是我的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>

和我的javascript 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();的脚本

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 ?

首先你需要添加一个特定的id到<td id="xxx">的状态顺序，然后你可以使用相同的id在你的jquery添加各自的背景颜色和更改文本为"交付或取消"。

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

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

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

无需两次点击并使用相同的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 {
        }
    });
});

在上面的代码片段中我修改了什么:

窗体上下文中的按钮选择器。$("#main-form button")，让你点击两个按钮。
var $this = $(this);你可以使用有一个变量，以后将在回调中使用，如error:fn, success:fn, complete:fn。
this.id.toLowerCase()让你有一个动态弹出消息的两个按钮。
todo:this.id我们正在传递被点击按钮的id。
var msg = result === "Approved" ? "Order Approved" : "Order Cancelled";这行可以用于两个按钮消息，如果你从php返回一个特定的文本。
$this.prop("disabled", true);这里$this是点击按钮，因为我们缓存它，并使用.prop()方法来改变任何属性，如disabled, checked etc.
增加一个complete回调，将一个类添加到tds。你可以在代码片段中看到。

在这个答案中5是您可能遇到的一些问题。

相关内容

最新更新

热门标签：