javascript - 如果页面刷新或表格更新,背景颜色将如何保留

标签 javascript php jquery html css

当客户订购时,他/她的订单将保存到数据库中,其中所有元素都是Pending,我将批准或取消他/她的订单。当我单击 Approve 按钮 时,待定订单将被 Delivered 并且如果 Cancel 按钮,该订单将被 Cancelled .现在我想要 css success 为所有“已交付”的 td 和 css danger 为那些被取消的。即使我刷新页面,背景颜色也会保持不变。

这是我的表格,看起来像这样:

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        Pending
 09-11-2015      15-09-0000000003        2          134.07        Pending
 09-11-2015      15-09-0000000004        4          846.41        Pending

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

这是我的PHP

如您所见我的 td (order_status)。如果在我单击 Approve 按钮order_status 为“已交付”,我想在我的 css 中调用该 success .如果 order_status 通过单击 Cancel 按钮 被“取消”,请在我的 css 中调用 danger

那么我要执行 if else if 语句吗?

<?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";
//            $myData = mysql_query($sql,$con);
            $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);
                $Order = $row->empgrocmstID;

                $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 id='$Order' 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;
    }
?>

这是我对按钮的 ajax 调用

如您所见,注释了 css。这行得通,但是当我刷新页面时,背景色 消失了。我评论说 updateTable(); 也是因为 background color's 因为表格更新而消失了。所以我希望 td background color 即使我刷新页面也能保留。

$("#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){
//                                $('tr.active td.order_status').css("background-color", "green");
                    bootbox.alert('Order Approved',function(){
                    $("#Approve").attr("disabled", true);
                    });
//                                updateTable();
                }
            });   
        } else {

        }
    });
});
$("#Cancel").click(function(e) {
    e.preventDefault();
    var id = $('#cLoanOut tr.active').attr('id');
//                var x = $('table tr.active').find('td.class').html();
    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){
//                                $('tr.active td.order_status').css("background-color", "red");
                    bootbox.alert("Order Cancelled",function(){
                    $("#Cancel").attr("disabled", true);
                    });
//                                updateTable();
                }
            });   
        } else {

        }
    });
});

这是我的CSS

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #607d8b;
    color: #FFFFFF;
}
div.well{
    background-color: #fff9c4;
    color: #000000;
}
#cLoanOut .active{
    background-color: #2c9e94;
    color: #FFFFFF;
}
.table-hover > tbody > tr.active > td.danger:hover {
     background-color: red !important;
}
.table-hover > tbody > tr.active > td.warning:hover {
     background-color: yellow !important;
}
.table-hover > tbody > tr.active > td.success:hover {
     background-color: green !important;
}

还有我的表格

<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>

我想在我的 CSS 中调用特定 td 中的 dangersuccess。 'empgrocmstID' 是数据库中的自动递增字段。我知道如何通过将它放在 order_status 的 td 中来调用成功和危险... class='order_status success', class='order_status danger' 但这不是重点。

我已经在“显示”案例中尝试了这段代码,但 order_status 的 td 不会显示。

if ($order_status===''){
    $html .= "<td id='$Order' class='order_status success' style='text-align:center'>$order_status</td>";
}else if($order_status===''){
    $html .= "<td id='$Order' class='order_status danger' style='text-align:center'>$order_status</td>";
}

谢谢你的帮助

最佳答案

你可以简单地在你的数据库中创建另一行你有状态的地方。只需将其设置为 1 = 已批准和 2 = 未批准。 现在你可以做一个简单的 if 并用 2 个不同的 css 来回应它

关于javascript - 如果页面刷新或表格更新,背景颜色将如何保留,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32580584/

相关文章:

javascript - 如何使用chart.js为多个饼图设置图例和标题

jquery - 如何在悬停时将背景图像应用于 div - jQuery

javascript - 下拉列表中填充了数据库数据,并在按钮单击时添加

javascript - 'this' 不是指正确的方法

javascript - 为什么自定义字体会减慢我的程序速度?

Javascript将4个数组的值合并到一个对象中

javascript - AngularJS 可以在刷新时监听 $locationChangeSuccess 吗?

php - 如何只从 PHP 字符串中取出数字?

php - Nginx 1.11 - nginx.conf 文件已更改

javascript - 等待期间取消js