jQuery dataTables row.add with different classes on outer td based on content

Question

I want to add entries to a jQuery Datatable with row.add and while adding (or afterwards if not possible while adding) change the class of the outer <td> based on the content. Values > 5 should get the class color-green, values below 5 color-red

var mTableROH   = $('.mm-table.ROH').DataTable(
    {
        dom: 'Bfrtip',
        "stateSave": true,

    }
);

for(let i = 0; i < 10; i++)
{
  mTableROH.row.add(
          [
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
          ]
  );
 
}
 mTableROH.columns.adjust().draw();

    

.color-red{
  color: red;
}

color-green{
  color: green;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

                            <table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH">
                                <thead>                             
                                    <tr>
                                        <th>Value 1</th>
                                        <th>Value 2</th>
                                        <th>Value 3</th>
                                        <th>Value 4</th>
                                        <th>Value 5</th>
                                        <th>Value 6</th>
                                        <th>Value 7</th>
                                        <th>Value 8</th>
        
                                    </tr>
                                </thead>
                                <tbody>
                                
                                </tbody>

                            </table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

How to add those classes while adding new rows like this?

Answer 1

While I'm at this let me also help you simplify your for loop so that you don't have to repeat (Math.random() * 10).toFixed(2) 8 times

for (let i = 0; i < 10; i++) {
    let randomNumbers = [];
    for (let j = 0; j < 8; j++) {
        randomNumbers.push((Math.random() * 10).toFixed(2));
    }
    mTableROH.row.add(randomNumbers)
}
mTableROH.columns.adjust().draw();

Right after the above code, you can write this, this adds the class after the adding of the table cells:

$(".mm-table.ROH tbody td").each(function() {
     const value = parseFloat($(this).text());
     $(this).addClass(value > 5 ? "color-green" : "color-red");
});

What it does is using the jQuery selector we can retrieve all the td elements inside the tbody of the element with class .mm-table.ROH, and using the .each() function, we pass in a function that gets executed for each td element. So we retrieve the value from the .text() property of $(this) (which refers to the current td element), and then add the corresponding class based on if the value is more than 5 or not.

Answer 2

So, here is an approach on how to tackle your problem. Get all your cells with document.querySelectorAll and then you should do a forEach method in order to get the innerHTML of every cell. Thus this will allow you to get the string and from there on you can do a parseFloat() method to get the real numeric value of the cell. At last, you can do a conditional statement which checks if the value is below or more than 5. If it is likewise, you assign the class with classList.add() inside every cell you need. Cheers

var mTableROH = $('.mm-table.ROH').DataTable({
  dom: 'Bfrtip',
  "stateSave": true,
   "createdRow": function(row, data, dataIndex) { // add a callback function
    const length = row.children.length;
    for (let i = 0; i < length; i++) {
         (data[i] > 5) ? row.children[i].classList.add("color-green") : row.children[i].classList.add("color-red");
    }
}
});

for (let i = 0; i < 10; i++) {
  mTableROH.row.add(
      [
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
      ]).draw()
    .nodes()
    .to$()
    .addClass('row');
}

mTableROH.columns.adjust().draw();

.color-red {
  color: red;
}

.color-green {
  color: green;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH">
  <thead>
    <tr>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
      <th>Value 4</th>
      <th>Value 5</th>
      <th>Value 6</th>
      <th>Value 7</th>
      <th>Value 8</th>

    </tr>
  </thead>
  <tbody>

  </tbody>

</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>