Вот мой 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("mdY"); $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 .
Если успех, я хочу изменить background color этого td на success/green если заказ был approved/delivered . В случае 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; }
Как я могу назвать success для Delivered и danger для Cancelled если true для моего td ( order_status )?
Сначала вам нужно добавить конкретный идентификатор в <td id="xxx"> порядка состояния, а затем вы можете использовать один и тот же идентификатор в своем jquery, чтобы добавить соответствующий цвет фона и изменить текст как «Поставлено или Отменить».
Вам нужно выполнить этот процесс при успешном событии ajax call success.
$("#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') .'">';
Вы устанавливаете класс в TR в зависимости от $ order_status. Затем в вашем 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 мы todo:this.id идентификатор кнопки todo:this.id . var msg = result === "Approved" ? "Order Approved" : "Order Cancelled"; эта строка может использоваться для обоих сообщений кнопок, если вы возвращаете определенный текст из php.
$this.prop("disabled", true); здесь $this нажатая кнопка, когда мы кэшировали ее и использовали метод .prop() для изменения любого свойства, такого как disabled, checked etc. . д.
complete обратный вызов, чтобы добавить класс в tds. вы можете видеть это в фрагменте. В этом ответе 5 есть вопрос, который может возникнуть для вас.