Ajax appended table colour change based on the conditon

[Senthilkumar]

Dear Team,

I am appending the table using Ajax script on my php page.

In my table i am having 7 columns (TIV, Marketingpromotion, Revenue, Equipementpopulation, Employeeexpense, Infrastructureexpense, Otherexpense). All these columns are updating from Mysql databse sucessfully. But i want to change the text colour based on the conditon.

My table output is 

My condition is 

 

If the value is 0 it should display "Pending from Dealer" using class name of "pending", if value is 1 it shout display "Pending from 1st Approver" using class name of "progress", if value is 2 it shout display "Pending from 1st Approver" using class name of "progress" and  if value is 3 it shout display "Pending from 1st Approver" using class name of "submited".

My code is 

<script>
           $('.Filter').click(function () {

               var dealerid = document.getElementById("Dealer").value;
            var empno = <?PHP echo $Emp_No ?>;

               $.ajax({
                   type: 'get',
                   dataType: 'JSON',
                   url: 'MIS_Table.php',
                   data:  'dealerid=' + dealerid + '&empno=' + empno  ,
                   success: function (response) {
                    if(response){
                       var len = response.length;

                       $("#userTable tbody").empty();

                       for (var i = 0; i < len; i++) {
                           var TIV_Status = response[i].TIV_Status;
                           var Marketingpromotion_Status = response[i].Marketingpromotion_Status;
                           var Revenue_Status = response[i].Revenue_Status;
                           var Equipementpopulation_Status = response[i].Equipementpopulation_Status;
                           var Employeeexpense_Status = response[i].Employeeexpense_Status;
                           var Infrastructureexpense_Status = response[i].Infrastructureexpense_Status;
                           var Otherexpense_Status = response[i].Otherexpense_Status;
                           var Month = response[i].Month;
                           var TIV = response[i].TIV;
                           var Marketingpromotion = response[i].Marketingpromotion;
                           var Revenue = response[i].Revenue;
                           var Equipementpopulation = response[i].Equipementpopulation;
                           var Employeeexpense = response[i].Employeeexpense;
                           var Infrastructureexpense = response[i].Infrastructureexpense;
                           var Otherexpense = response[i].Otherexpense;
                                             

                           var tr_str = "<tr>" +
                               "<td align='center'>" + (i + 1) + "</td>" +
                               "<td align='center'>" + Month + "</td>" +
                               "<td>" + TIV_Status + "</td>" +
                               "<td>" + Marketingpromotion_Status + "</td>" +
                               "<td>" + Revenue_Status + "</td>" +
                               "<td>" + Equipementpopulation_Status + "</td>" +
                               "<td>" + Employeeexpense_Status + "</td>" +
                               "<td>" + Infrastructureexpense_Status + "</td>" +
                               "<td>" + Otherexpense_Status + "</td>" +

                               "</tr>";                              

                           
                           $("#userTable tbody").append(tr_str);
                          
                           TIV == '0' ? document.querySelectorAll("td")[2].classList.add('pending') :  document.querySelectorAll("td")[2].classList.add('submited');
                           Marketingpromotion == '0' ? document.querySelectorAll("td")[3].classList.add('pending') : document.querySelectorAll("td")[3].classList.add('submited');
                           Revenue == '0' ? document.querySelectorAll("td")[4].classList.add('pending') : document.querySelectorAll("td")[4].classList.add('submited');
                           Equipementpopulation == '0' ? document.querySelectorAll("td")[5].classList.add('pending') : document.querySelectorAll("td")[5].classList.add('submited');
                           Employeeexpense == '0' ? document.querySelectorAll("td")[6].classList.add('pending') : document.querySelectorAll("td")[6].classList.add('submited');
                           Infrastructureexpense == '0' ? document.querySelectorAll("td")[7].classList.add('pending') : document.querySelectorAll("td")[7].classList.add('submited');
                           Otherexpense == '0' ? document.querySelectorAll("td")[8].classList.add('pending') : document.querySelectorAll("td")[8].classList.add('submited');
                       
                       
                       }
                    }
                  }
               
               });

                       
        });
    </script>

Witht the above code the color is changing only on the first row. Not for all the row. And i dont know how to apply all the four conditions.

 

Can any onr please help me to solve this issue

[Barand]

Can you post an example of the JSON response string that you are processing?

[Senthilkumar]

My MIS_Table.php code is 

<?php

include("../connection.php");

    $dealerid = $_GET["dealerid"];


    $query = "select * from monthly_mis_status WHERE  dealerid = '$dealerid' ORDER BY month ASC ";
    $result = mysqli_query($conn, $query);


    while($row = mysqli_fetch_array($result)){

        $TIV= $row['TIV'];
        $Marketingpromotion= $row['Marketingpromotion'];
        $Revenue= $row['Revenue'];
        $Equipementpopulation= $row['Equipementpopulation'];
        $Employeeexpense= $row['Employeeexpense'];
        $Infrastructureexpense = $row['Infrastructureexpense'];
        $Otherexpense = $row['Otherexpense'];
        $Month = $row['month'];
        $Month_Format = date('M-Y', strtotime($Month));

        

        if ($TIV == 0) {
            $TIVStatus = "Pending from Dealer";
        } else if ($TIV ==1) {
            $TIVStatus = "Pending from 1st Approver";
        } else if ($TIV == 2) {
            $TIVStatus = "Pending from 2nd Approver";
        } else if ($TIV == 3) {
            $TIVStatus = "Approval Completed";
        }

        if ($Marketingpromotion == 0) {
            $Marketingpromotionstatus = "Pending from Dealer";
        } else if ($Marketingpromotion == 1) {
            $Marketingpromotionstatus = "Pending from 1st Approver";
        } else if ($Marketingpromotion == 2) {
            $Marketingpromotionstatus = "Pending from 2nd Approver";
        } else if ($Marketingpromotion == 3) {
            $Marketingpromotionstatus = "Approval Completed";
        }

        if ($Equipementpopulation == 0) {
            $Equipementpopulationstatus = "Pending from Dealer";
        } else if ($Equipementpopulation == 1) {
            $Equipementpopulationstatus = "Pending from 1st Approver";
        } else if ($Equipementpopulation == 2) {
            $Equipementpopulationstatus = "Pending from 2nd Approver";
        } else if ($Equipementpopulation == 3) {
            $Equipementpopulationstatus = "Approval Completed";
        }


        if ($Employeeexpense == 0) {
            $Employeeexpenseststus = "Pending from Dealer";
        } else if ($Employeeexpense == 1) {
            $Employeeexpenseststus = "Pending from 1st Approver";
        } else if ($Employeeexpense == 2) {
            $Employeeexpenseststus = "Pending from 2nd Approver";
        } else if ($Employeeexpense == 3) {
            $Employeeexpenseststus = "Approved Completed";
        }


        if ($Revenue == 0) {
            $RevenueStatus = "Pending from Dealer";
        } else if ($Revenue == 1) {
            $RevenueStatus = "Pending from 1st Approver";
        } else if ($Revenue == 2) {
            $RevenueStatus = "Pending from 2nd Approver";
        } else if ($Revenue == 3) {
            $RevenueStatus = "Approval Completed";
        }

        if ($Infrastructureexpense == 0) {
            $Infrastructureexpenseststus = "Pending from Dealer";
        } else if ($Infrastructureexpense == 1) {
            $Infrastructureexpenseststus = "Pending from 1st Approver";
        } else if ($Infrastructureexpense == 2) {
            $Infrastructureexpenseststus = "Pending from 2nd Approver";
        } else if ($Infrastructureexpense == 3) {
            $Infrastructureexpenseststus = "Approval Completed";
        }

        if ($Otherexpense == 0) {
            $Otherexpenseststus = "Pending from Dealer";
        } else if ($Otherexpense == 1) {
            $Otherexpenseststus = "Pending from 1st Approver";
        } else if ($Otherexpense == 2) {
            $Otherexpenseststus = "Pending from 2nd Approver";
        } else if ($Otherexpense == 3) {
            $Otherexpenseststus = "Approval Completed";
        }



        $return_arr[] = array(
                "TIV_Status" => $TIVStatus,
                "Marketingpromotion_Status" => $Marketingpromotionstatus,
                "Revenue_Status" => $RevenueStatus,
                "Equipementpopulation_Status" => $Equipementpopulationstatus,
                "Employeeexpense_Status" => $Employeeexpenseststus,
                "Infrastructureexpense_Status" => $Infrastructureexpenseststus,
                "Otherexpense_Status" => $Otherexpenseststus,
                "Month" => $Month_Format,
                "TIV" => $TIV,
                "Marketingpromotion" => $Marketingpromotion,
                "Revenue" => $Revenue,
                "Equipementpopulation" => $Equipementpopulation,
                "Employeeexpense" => $Employeeexpense,
                "Infrastructureexpense" => $Infrastructureexpense,
                "Otherexpense" => $Otherexpense,

        );
    }

    echo json_encode($return_arr);

 

[Senthilkumar]

[{"TIV_Status":"Pending from Dealer","Marketingpromotion_Status":"Pending from Dealer","Revenue_Status":"Pending from 1st Approver","Equipementpopulation_Status":"Pending from 1st Approver","Employeeexpense_Status":"Pending from Dealer","Infrastructureexpense_Status":"Pending from Dealer","Otherexpense_Status":"Pending from Dealer","Month":"Feb-2023","TIV":"0","Marketingpromotion":"0","Revenue":"1","Equipementpopulation":"1","Employeeexpense":"0","Infrastructureexpense":"0","Otherexpense":"0"},{"TIV_Status":"Pending from 1st Approver","Marketingpromotion_Status":"Pending from 1st Approver","Revenue_Status":"Pending from 1st Approver","Equipementpopulation_Status":"Pending from 1st Approver","Employeeexpense_Status":"Pending from 1st Approver","Infrastructureexpense_Status":"Pending from 1st Approver","Otherexpense_Status":"Pending from 1st Approver","Month":"Apr-2023","TIV":"1","Marketingpromotion":"1","Revenue":"1","Equipementpopulation":"1","Employeeexpense":"1","Infrastructureexpense":"1","Otherexpense":"1"},{"TIV_Status":"Pending from 2nd Approver","Marketingpromotion_Status":"Pending from 1st Approver","Revenue_Status":"Pending from Dealer","Equipementpopulation_Status":"Pending from Dealer","Employeeexpense_Status":"Pending from Dealer","Infrastructureexpense_Status":"Pending from Dealer","Otherexpense_Status":"Pending from Dealer","Month":"May-2023","TIV":"2","Marketingpromotion":"1","Revenue":"0","Equipementpopulation":"0","Employeeexpense":"0","Infrastructureexpense":"0","Otherexpense":"0"},{"TIV_Status":"Approval Completed","Marketingpromotion_Status":"Pending from 1st Approver","Revenue_Status":"Pending from Dealer","Equipementpopulation_Status":"Pending from Dealer","Employeeexpense_Status":"Pending from 1st Approver","Infrastructureexpense_Status":"Pending from Dealer","Otherexpense_Status":"Pending from Dealer","Month":"Jun-2023","TIV":"3","Marketingpromotion":"1","Revenue":"0","Equipementpopulation":"0","Employeeexpense":"1","Infrastructureexpense":"0","Otherexpense":"0"}]
 

[Senthilkumar]

Dear Barand,

Pls reply

[Barand]

Patience, Grasshopper. I'm working on it.

[Barand]

Something like this, perhaps. I used just the numeric values from your JSON data. No point processsing everything twice.

<?php

################################################################################
## PROCESS AJAX REQUEST
################################################################################
    if (isset($_GET['ajax'])) {
        $data = array (
                          0 => array (
                            'Month' => 'Feb-2023',
                            'TIV' => '0',
                            'Marketingpromotion' => '0',
                            'Revenue' => '1',
                            'Equipementpopulation' => '1',
                            'Employeeexpense' => '0',
                            'Infrastructureexpense' => '0',
                            'Otherexpense' => '0',
                          ),
                          1 => array (
                            'Month' => 'Apr-2023',
                            'TIV' => '1',
                            'Marketingpromotion' => '1',
                            'Revenue' => '1',
                            'Equipementpopulation' => '1',
                            'Employeeexpense' => '1',
                            'Infrastructureexpense' => '1',
                            'Otherexpense' => '1',
                          ),
                          2 => array (
                            'Month' => 'May-2023',
                            'TIV' => '2',
                            'Marketingpromotion' => '1',
                            'Revenue' => '0',
                            'Equipementpopulation' => '0',
                            'Employeeexpense' => '0',
                            'Infrastructureexpense' => '0',
                            'Otherexpense' => '0',
                          ),
                          3 => array (
                            'Month' => 'Jun-2023',
                            'TIV' => '3',
                            'Marketingpromotion' => '1',
                            'Revenue' => '0',
                            'Equipementpopulation' => '0',
                            'Employeeexpense' => '1',
                            'Infrastructureexpense' => '0',
                            'Otherexpense' => '0',
                          )
                        );

        exit (json_encode($data));
    }
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type='text/javascript'>
var texts = [ "Pending from Dealer", "Pending from 1st Approver", "Pending from 2nd Approver", "Approval Complete" ];
var classes = [ "pending", "progress", "progress", "submitted" ];
    
    $(function() {
        $("#btndata").click( function() {
            $.get(
                "",                                                             // sends request to self
                {"ajax":1},
                function(resp) {
                    $("#tdata").empty()
                    $.each(resp, function(i, rec) {
                        let sno = i+1 
                        let newrow = $("<tr>")                                  // create new row
                        let cell = $("<td>", {"html":sno})                      // add Sno col
                        $(newrow).append(cell)                                  // process records
                        $.each(rec, function(k, v) {
                            if (k=="Month") {
                                cell = $("<td>", {"html":v})
                                $(newrow).append(cell)                          // add month
                            }
                            else {
                                newrow.append(statusCell(v))                    // get content and class from cell value - add to row
                            }
                        })
                        $("#tdata").append(newrow)                              // add the row to the table body
                    })
                },
                "JSON"
            )
        })
    })
    
    function statusCell(v)
    {
        let cls = classes[v]
        let txt = texts[v]
        return $("<td>", {"class":cls, "html":txt})
    }
</script>

<style type='text/css'>
    header {
        padding: 16px 0;
        margin-bottom: 20px;;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    th, td {
        padding: 4px;
        text-align: center;
    }
    th {
        background-color: black;
        color: white;
    }
    .pending {
        color: red;
    }
    .progress {
        color: orange;
    }
    .submitted {
        color: green;
    }
</style>

</head>
<body>
    <header>
        <h1>Example</h1>
    </header>
    <button id='btndata'>Get data</button>
    <table border='1'>
        <thead>
        <tr><th>S.No</th>
            <th>Date</th>
            <th>TIV</th>
            <th>Marketing<br>Promotion</th>
            <th>Revenue</th>
            <th>Equipment<br>Population</th>
            <th>Employee<br>Expense</th>
            <th>Infrastructure<br>Expense</th>
            <th>Other<br>Expense</th>
        </tr>
        </thead>
        <tbody id='tdata'>
            <!-- data goes here -->
        </tbody>
    </table>
</body>
</html>

output

[Senthilkumar]

Dear Barand,

 

Thanks for your reply. It is working perfetly as per my requirement.

Can you please explain this code for my better understand of this 

[Barand]

What don't you understand? I commented it for you.

[Senthilkumar]

On 9/1/2023 at 7:39 PM, Barand said:

if (k=="Month") {
                                cell = $("<td>", {"html":v})
                                $(newrow).append(cell)  

The above conditon is not understanding

[Senthilkumar]

On 9/1/2023 at 7:39 PM, Barand said:

{"ajax":1},

how to pass another variable here

[Barand]

37 minutes ago, Senthilkumar said:

The above conditon is not understanding

Then your data  is not the same as mine. The data you posted had a "Month" key.