title: Changing td's background color to success or danger
body: <p>Here is my php where I want this td (<code>order_status</code>) change background color to <code>green or success</code> if the order was <code>delivered</code> and to change background color as <code>danger or red</code> if the order was <code>canceled</code>. </p>
  
  <pre><code>&lt;?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-&gt;query($sql);
  
              $html = ''; $ctr = 0;
              if ($result-&gt;num_rows){
                  while ($row = $result-&gt;fetch_object()){
                  $id = $row-&gt;empgrocmstID;
                  $date_ordered = date("m-d-Y");
                  $order_no = date($row-&gt;order_no);
                  $total_items = number_format($row-&gt;total_items);
                  $total_amount = number_format($row-&gt;total_amount,2);
                  $order_status = wordwrap($row-&gt;order_status);
  
                  $html .= "&lt;tr id='$id'&gt;";
                  $html .= "&lt;td class='date_ordered' style='text-align:center'&gt;$date_ordered&lt;/td&gt;";
                  $html .= "&lt;td class='order_no' style='text-align:center'&gt;$order_no&lt;/td&gt;";
                  $html .= "&lt;td class='total_items' style='text-align:right'&gt;$total_items&lt;/td&gt;";
                  $html .= "&lt;td class='total_amount' style='text-align:right'&gt;$total_amount&lt;/td&gt;";
                  $html .= "&lt;td class='order_status' style='text-align:center'&gt;$order_status&lt;/td&gt;";
                  $html .= "&lt;/tr&gt;";
                  }
              }
              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;
      }
  ?&gt;
  </code></pre>
  
  <p>Here's my table form</p>
  
  <pre><code>&lt;form class="form-horizontal" id="main-form" action="PHP_groceryReleasingProcess.php" method="POST"&gt;
      &lt;table class="tablesorter table table-bordered table-condensed" id="cLoanOut" style="table-layout: fixed;"&gt;
          &lt;colgroup&gt;
              &lt;col width="110"&gt;
              &lt;col width="130"&gt;
              &lt;col width="50"&gt;
              &lt;col width="60"&gt;
              &lt;col width="90"&gt;
          &lt;/colgroup&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Date Ordered&lt;/th&gt;
                  &lt;th&gt;Order No.&lt;/th&gt;
                  &lt;th&gt;Total Item(s)&lt;/th&gt;
                  &lt;th&gt;Total Amount&lt;/th&gt;
                  &lt;th&gt;Order Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button id="Approve" role="button" class="btn btn-success" disabled&gt;Approve Order&lt;/button&gt;
      &lt;button id="Cancel" role="button" class="btn btn-danger" disabled&gt;Cancel Order&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And my javacript ajax call</p>
  
  <pre><code>$("#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 : "&lt;?php echo $server_name; ?&gt;/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 : "&lt;?php echo $server_name; ?&gt;/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 {
  
          }
      });
  });
  </code></pre>
  
  <p>If i clicked <code>Approve Order button</code>, the data of <code>order_status</code> which is the td (<code>Pending</code>) will change to <code>Delivered</code> and if I clicked <code>Cancel Order button</code> it will change to <code>Cancelled</code>. <br></p>
  
  <p>If success, I want to change the <code>background color</code> of that <code>td</code> into <code>success/green</code> if the order was <code>approved/delivered</code>. If <code>canceled</code>, change <code>background color</code> to <code>danger/red</code>.</p>
  
  <p>I appreciate your help thanks.</p>
  
  <p>It looks like this. Every tr has an active class when you click.</p>
  
  <pre><code>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
  
         &lt;button&gt;Approve Order&lt;/button&gt; &lt;button&gt;Cancel Order&lt;/button&gt;
  </code></pre>
  
  <p>My script for the <code>updateTable();</code></p>
  
  <pre><code>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: "&lt;?php echo $server_name; ?&gt;/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.');
          }
      });
  }
  </code></pre>
  
  <p>I added css to my form</p>
  
  <pre><code>.table-hover &gt; tbody &gt; tr &gt; td.danger:hover {
       background-color: red !important;
  }
  .table-hover &gt; tbody &gt; tr &gt; td.warning:hover {
       background-color: yellow !important;
  }
  .table-hover &gt; tbody &gt; tr &gt; td.success:hover {
       background-color: green !important;
  }
  </code></pre>
  
  <p>How can I call <code>success</code> for <code>Delivered</code> and <code>danger</code> for <code>Cancelled</code> if true to my td (<code>order_status</code>)?</p>