将td的背景颜色更改为成功或危险 [英] Changing td's background color to success or danger
本文介绍了将td的背景颜色更改为成功或危险的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是我的php，我希望这个td（ order_status ）将背景颜色更改为绿色或成功如果订单为取消订单危险或红色
<？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 not connect.mysql_error（））;
}
mysql_select_db（atec_coop，$ con）;
switch（$ todo）{
casedisplay：
$ 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;
休息;
case取消：
$ Cancelquery =UPDATE tb_empgroc_master SET order_status ='取消'WHERE empgrocmstID ='。$ _ POST ['empgrocmstID']。';
mysql_query（$ Cancelquery，$ con）;
休息;
caseApprove：
$ Approvequery =UPDATE tb_empgroc_master SET order_status ='Delivered'WHERE empgrocmstID ='。$ _ POST ['empgrocmstID']。';
mysql_query（$ Approvequery，$ con）;
休息;
}
？>
这是我的表格
< form class =form-horizontalid =main-formaction =PHP_groceryReleasingProcess.phpmethod =POST>
< table class =tablesorter table table-bordered table-condensedid =cLoanOutstyle =table-layout：fixed;>
< colgroup>
< col width =110>
< col width =130>
< col width =50>
< col width =60>
< col width =90>
< / colgroup>
< thead>
< tr>
< th>日期有序< / th>
< th>订单号< / th>
总项目< / th>
总金额< / th>
Order Status< / th>
< / tr>
< / thead>
< tbody>
< / tbody>
< / table>
< button id =批准角色=按钮class =btn btn-success禁用>批准订单< /按钮>
< / form>
和我的javaScript ajax调用
<$ p $点击（功能（e）{
e.preventDefault（）;
var id = $（'＃cLoanOut tr.active'） .attr（'id'）;
bootbox.confirm（你确定要批准订单？，否，是，函数（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（你确定要取消订单？，否，是，函数（r）{
if（r）{
$ .ajax（{
url：<？php echo $ server_name;？> /emcis_coopmain/process/PHP_groceryReleasingProcess.php，
type：POST，
async：false ，
data：{
empgrocmstID：id，
todo：取消
}，
成功：功能（结果）{
bootbox.alert（ （）;
updateTable（）;
}
}）;
} else {
}
}）;
}）;
如果我点击批准订单按钮，数据 order_status 即td（ Pending ）将变为交付，如果我点击取消订单按钮，它将变为取消。
如果成功，我想更改 td的转换为背景色如果订单是批准/交付，成功/绿色。如果取消，将背景颜色更改为危险/红色。
感谢您的帮助，谢谢。
看起来像这样。点击后，每个tr都有一个活动类。
日期已订购订单号总项目总金额订单状态
09-11-2015 15-09-0000000001 3 213.85待处理
09-11-2015 15-09-0000000002 1 130.00交付
09-11-2015 15-09-0000000003 2 134.07待处理
09-11-2015 15-09-0000000004 4 846.41已取消
<按钮>批准订单< /按钮> <按钮>取消订单< /按钮>
我的 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;
}
我怎样才能调用成功 for 已交付和危险 for 已取消如果为true我的td（ order_status ）？
解决方案
首先，您需要添加特定的ID到< td id =xxx> 状态顺序，然后你可以在你的jquery中使用相同的id来添加相应的背景颜色，并将文本改为Delivered或取消。
您需要在ajax调用成功事件上执行此过程。
$（＃xxx）。css（background-color，green）;
$（＃xxx）。css（background-color，red）;
$（＃xxx）。html（Delivered）;
$（＃xxx）。html（取消）;
Here is my php where I want this td (order_status) change background color to green or success if the order was delivered and to change background color as danger or red if the order was 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;
}
?>
Here's my table form
<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>
And my javacript ajax call
$("#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 {
}
});
});
If i clicked Approve Order button, the data of order_status which is the td (Pending) will change to Delivered and if I clicked Cancel Order button it will change to Cancelled.
If success, I want to change the background color of that td into success/green if the order was approved/delivered. If canceled, change background color to danger/red.
I appreciate your help thanks.
It looks like this. Every tr has an active class when you click.
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>
My script for the 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.');
}
});
}
I added css to my form
.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;
}
How can I call success for Delivered and danger for Cancelled if true to my td (order_status)?
解决方案
First you need to add a specific id to <td id="xxx"> of status order and then you can use same id in your jquery to add respective background color and change Text as "Delivered or Cancel".
You need to do this process on ajax call success event.
$("#xxx").css("background-color", "green");
$("#xxx").css("background-color", "red");
$("#xxx").html("Delivered");
$("#xxx").html("Cancel");
这篇关于将td的背景颜色更改为成功或危险的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
