Conditional Formatting on an HTML table created with a Script

Question

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();
});

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:

APB · Accepted Answer · 2021-02-23 15:38:14Z

1

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>

answered Feb 23, 2021 at 15:38

APB

3371 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jillian Wittstock Over a year ago

If the table was created in a 'standard' way where you manually populate the table, this idea would work but since it is created with a script it doesn't work

APB Over a year ago

It is no different than how you have created your table. I guess your issue is appending tbody element in each row. You should just append tr as rows on a body parent.

APB Over a year ago

In snapshot.docChanges().forEach you are appending "tbody" on each row and this is incorrect. Each table has one body that includes table data rows.

APB Over a year ago

You should append rows (tr) in tbody element. So your code should be sth like this. $('#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>"));

Jillian Wittstock Over a year ago

Okay we making progress but it's still not 100% right... the Array.from() is returning a blank array but the HTLCollection that is created by document.querySelector("#transTable > tbody").children has the rows in it....

|

Collectives™ on Stack Overflow

Conditional Formatting on an HTML table created with a Script

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related