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

Question

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

Navigation

#1 by (1 votes)

2

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 row, since they contain different values.

At first the values are "Completed, Delayed, In Progress and New" and all data has been entered manually, but will soon 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 was able to do this function that changes the background color, but the only problem is that it adds the color to all the lines. What I need is for each line to have its color changed based on the value contained within <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>

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

The only problem I could not solve was that this function adds the color to all% with% of the same color based on the first value found. At first it was the only one that I was able to make change the background color, because my previous ones did nothing, even if I had followed that flow.

I hope to have made me understand the doubt I have.

javascript html jquery css

asked by anonymous 06.07.2017 / 15:49

1 answer

wordpress add_rewrite_rule with custom field split 1 column into 2 on sql server giving update

score 1 · Accepted Answer

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>