Conditional Formatting on an HTML table created with a Script

user_13818681 0
Viewed 139

I used a script to read my Firestore database and add the data to a table on my page.

//On button click show detailed transactions by truck
$(".view").click(function() {
  $("#transTable > tbody").empty();
  var truck = document.getElementById("reg").value
  $("#truckreg").text("Registration: " + truck);

  firebase.firestore().collection('Vehicle').doc(truck).collection('Refuels').orderBy('Date')
    .onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        trans = change.doc.data()
        $('#transTable tbody').append($("<tr data-efficiency='" + trans.Efficiency + "'><td>" + trans.Date + "</td><td>" + trans.Odometer + "</td><td>" + trans.Volume + "</td><td>" + trans.Price + "</td><td class= 'efficiency'>" + trans.Efficiency + "</td></tr>"));
      });
    });
  findLowestEfficiency();
});

enter image description here

My HTML table displays all the information without any issues. Now I'd like to add a conditional format on the last / Efficiency column in my table.

When trying the following code:

var lowestEfficiency = null;

function findLowestEfficiency() {
  console.log("document.querySelector('#transTable tbody').children")
  console.log(document.querySelector("#transTable tbody").children)
  console.log("Array.from(document.querySelector('#transTable tbody').children);")
  var rows = Array.from(document.querySelector("#transTable tbody").children);
  console.log(rows)

  rows.forEach(function(ele) {
    var res = ele.getAttribute('data-efficiency');
    console.log(res)
    if (lowestEfficiency == null || res < lowestEfficiency) {
      lowestEfficiency = res;
    }
  });
  document.querySelector("#transTable > tbody tr[data-efficiency=\"" + lowestEfficiency + "\"] .efficiency").classList.add("lowest");
  console.log("Class added")
}

The HTMLCollection does not get correctly converted to an array as seen by the following screenshot of the console log:

enter image description here

css html javascript
1 Answers

I think you can do it easily with js (without Jquery). My idea is store efficiency value in attribute like data-efficiency on each row (tr). And then check the lowest value and give it a specific class.

var lowestEfficiency = null;
    
findLowestEfficiency();

function findLowestEfficiency() {
  var rows = Array.from(document.querySelector("#table tbody").children);

  rows.forEach(function(ele) {
    var res = ele.getAttribute('data-efficiency');
    if (lowestEfficiency == null || res < lowestEfficiency) {
      lowestEfficiency = res;
    }
  });

   document.querySelector("#table tbody tr[data-efficiency=\"" + lowestEfficiency + "\"] .efficiency").classList.add("lowest");
}
.lowest {
  color: #fff;
  background-color: red;
}

table td, table th{
  border: 1px solid gray;
  text-align: center;
}
<table id="table">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
      <th>Efficiency</th>
    </tr>
  </thead>
    <tbody>
        <tr data-efficiency="4">
            <td>Row1.Col1</td>
            <td>Row1.Col2</td>
            <td>Row1.Col3</td>
            <td>Row1.Col4</td>
            <td class="efficiency">4</td>
        </tr>

        <tr data-efficiency="2">
            <td>Row2.Col1</td>
            <td>Row2.Col2</td>
            <td>Row2.Col3</td>
            <td>Row2.Col4</td>
            <td class="efficiency">2</td>
        </tr>

        <tr data-efficiency="5">
            <td>Row3.Col1</td>
            <td>Row3.Col2</td>
            <td>Row3.Col3</td>
            <td>Row3.Col4</td>
            <td class="efficiency">5</td>
        </tr>

        <tr data-efficiency="1">
            <td>Row4.Col1</td>
            <td>Row4.Col2</td>
            <td>Row4.Col3</td>
            <td>Row4.Col4</td>
            <td class="efficiency">1</td>
        </tr>

        <tr data-efficiency="3">
            <td>Row5.Col1</td>
            <td>Row5.Col2</td>
            <td>Row5.Col3</td>
            <td>Row5.Col4</td>
            <td class="efficiency">3</td>
        </tr>
    </tbody>
</table>

user_26952960
Related