How to change the color of the rows of a table according to the value of each one

Question

I’m having trouble developing a Function that changes the color of a <tr> based on a specific value of a <td>

I need this Function to do for each line, because they contain different values.

At first the values are "Completed, Delayed, In Progress and New" and all the data were entered manually, but soon will be loaded from the database and will always have the same values.

            <table id="allBatchesTable" style="width: 80%">

                <!-- Essa primeira linha é os nomes das colunas -->
                <tr>
                    <th>Batch ID</th>
                    <th>Product</th>
                    <th>Batch Size</th>
                    <th>Priority</th>
                    <th>Start Req</th>
                    <th>Status</th>
                </tr>

                <tr id="idTr">
                    <td id="IDbatchID">B01091</td>
                    <td id="IDproduct">Choco Milk</td>
                    <td id="IDbatchSize">30000</td>
                    <td id="IDpriority">1</td>
                    <td id="IDstartReq">03-31-2017 08:00:00</td>

From here I need to make the line have its background color changed according to the value contained in this <td>

                    <td id="IDstatus">Completed</td>
                </tr>

                <tr>
                    <td>B01090</td>
                    <td>Choco Milk</td>
                    <td>30000</td>
                    <td>1</td>
                    <td>03-30-2017 06:00:00</td>
                    <td>Delayed</td>
                </tr>

                <tr>
                    <td>B04551</td>
                    <td>Strawberry Milk</td>
                    <td>20000</td>
                    <td>2</td>
                    <td>04-01-2017 00:00:00</td>
                    <td>In Progress</td>
                </tr>

                <tr>
                    <td>B03225</td>
                    <td>Banana Milk</td>
                    <td>15000</td>
                    <td>3</td>
                    <td>04-01-2017 00:00:00</td>
                    <td>New</td>
                </tr>

            </table>  

I managed to make this Function that changes the background color, but the only problem is that it adds the color to all lines. What I need is for each line to have its color changed based on the value contained within the <td>

Completed = Green
Delayed = Red
In Progress = Yellow
New = White

    <script>

            $(function () {
                var texto = $("#allBatchesTable tr:nth-child(2) td:nth-child(6)").text();
                var result = (texto);

                if (result == "Completed") {
                    $("#allBatchesTable").css("background", "#00b503");
                } else if (result == "Delayed") {
                    $("#allBatchesTable").css("background", "#f20000");
                } else if (result == "In Progress") {
                    $("#allBatchesTable").css("background", "#ffff00");
                } else if (result == "New") {
                    $("#allBatchesTable").css("background", "#ffffff");
                } else {
                    $("#allBatchesTable").css("background", "#ccc");
                }
            })

    </script>  

On the line var texto = $("#idDaTabela tr:nth-child(2) td:nth-child(6)").text(); notice that we have tr:nth-child(2) which references the first row of the table and td:nth-child(6) the sixth column of that row.

The only problem I didn’t get a solution was that this Function adds color to all <td>the same color based on the first value found. She was the only one I could get to change the background color, because my previous ones didn’t do anything, even if I had followed that flow.

I hope I made myself understand the doubt I have.

Answer 1

You can do this with structured data, with a JSON for example like this:

var tabela = {
  colunas: ["Batch ID", "Product", "Batch Size", "Priority", "Start Req", "Status"],
  linhas: [
    ["B01091", "Choco Milk", 30000, 1, "03-31-2017 08:00:00", "Completed"],
    ["B01090", "Choco Milk", 30000, 1, "03-30-2017 06:00:00", "Delayed"],
    ["B04551", "Strawberry Milk", 20000, 2, "04-01-2017 00:00:00", "In Progress"],
    ["B03225", "Banana Milk", 15000, 3, "04-01-2017 00:00:00", "New"]
  ]
}

And then generate the table and put those classes or colors you need:

var tabela = {
  "colunas": ["Batch ID", "Product", "Batch Size", "Priority", "Start Req", "Status"],
  "linhas": [
    ["B01091", "Choco Milk", 30000, 1, "03-31-2017 08:00:00", "Completed"],
    ["B01090", "Choco Milk", 30000, 1, "03-30-2017 06:00:00", "Delayed"],
    ["B04551", "Strawberry Milk", 20000, 2, "04-01-2017 00:00:00", "In Progress"],
    ["B03225", "Banana Milk", 15000, 3, "04-01-2017 00:00:00", "New"]
  ],
  "cores": {
    "Completed": "#ada",
    "Delayed": "#daa",
    "In Progress": "#add",
    "New": "#fff"
  }
}

var table = document.querySelector('table');
var head = table.querySelector('thead');
var body = table.querySelector('tbody');

// adicionar colunas
var cols = document.createElement('tr');
head.appendChild(cols);
tabela.colunas.forEach(function(col) {
  var th = document.createElement('th');
  th.innerHTML = col;
  cols.appendChild(th);
});

// adicionar linhas
tabela.linhas.forEach(function(linha) {
  var tr = document.createElement('tr');
  linha.forEach(function(col) {
    var td = document.createElement('td');
    td.innerHTML = col;
    if (tabela.cores[col]) tr.style.backgroundColor = tabela.cores[col];
    tr.appendChild(td);
  });
  body.appendChild(tr);
});

<table>
  <thead></thead>
  <tbody></tbody>
</table>