How to highlight a table row with the smallest value in a certain column using javascript

Question

Supposed that I have a table like this on a webpage with the id ='table' :

Name        Age          Money(USD)    DATE
A            19            4          2019-03-11 16:15:35
B            20            0          2019-03-11 16:16:37
C            27            3          2019-03-13 04:15:43
D            34            0          2019-03-13 04:16:57

Could you help me find the FIRST SMALLEST VALUE IN THE MONEY COLUMN , which is 0 for B in the Column1 and HIGHLIGHT the whole table row for B, using javascript without using any library and any button onClicking?

Note: I have searched around and just been unlucky enough to find the correct answer to my problem.

Thanks.

UPDATE : I just got a piece of javacript like this to get the first smallest value and print it out, but not be able to highlight the whole row with it

var table = document.getElementById("table"), minVal;
    for(var i = 1; i < table.rows.length; i++)
    {
      // if its the first row get the value
      if(i === 1){minVal = table.rows[i].cells[2].innerHTML; }
     // test with the other values
     else if(minVal > table.rows[i].cells[2].innerHTML){
       minVal = table.rows[i].cells[2].innerHTML;
     }
   }
document.getElementById("val").innerHTML = " Minimum Value = "+minVal;
console.log(maxVal);

Answer 1

var table = document.getElementById("table"), minVal, minI;
for(var i = 1; i < table.rows.length; i++){
   if(i === 1){
      minVal = table.rows[i].cells[2].innerHTML;
   }
   else if(minVal > table.rows[i].cells[2].innerHTML){
      minVal = table.rows[i].cells[2].innerHTML;
      minI = i;
   }
}
table.rows[i].cells[2].innerHTML = '<span style="background:red">' + table.rows[minI].cells[2].innerHTML + '</span>';

Something like that.

Answer 2

var table = document.getElementById("table");
var minVal = undefined;
for(var i = 1; i < table.rows.length; i++)
{
    if(i === 1){
        minVal = table.rows[i].cells[2]; 
    }
    else if(minVal.innerHTML > table.rows[i].cells[2].innerHTML){   
        minVal = table.rows[i].cells[2];
    }
}

minVal.parentElement.style.background="yellow";

Answer 3

There are two things you need to do:

• Convert innerHTML to a number using +
• Keep track of the row number while looping.

This is the code

var table = document.getElementById("table"), minVal;
let minRow = 1;
    for(var i = 1; i < table.rows.length; i++)
    {
      // if its the first row get the value
      if(i === 1){
          minVal = +table.rows[i].cells[2].innerHTML;

      }
     // test with the other values
     else if(minVal > table.rows[i].cells[2].innerHTML){
       minVal = table.rows[i].cells[2].innerHTML;
       minRow = i; 
     }
   }

let row = table.rows[minRow];
row.style.backgroundColor = 'red';

Answer 4

This simply keeps track of the minimum row, and lets you hang your formatting off of that:

 const highlightLowest = () => { var rows = table.rows; var minRow = rows[0] for (var i = 1; i < rows.length; i++){ rows[i].classList.remove('highlight') if (Number(rows[i].cells[2].innerHTML) < Number(minRow.cells[2].innerHTML)) { minRow = rows[i] } } minRow.classList.add('highlight') } 

 tr.highlight td {background-color: yellow} 

 <table id="table"> <tr><td>A</td><td>19</td><td>4</td><td>2019-03-11 16:15:35</td></tr> <tr><td>B</td><td>20</td><td>0</td><td>2019-03-11 16:16:37</td></tr> <tr><td>C</td><td>27</td><td>3</td><td>2019-03-13 04:15:43</td></tr> <tr><td>D</td><td>34</td><td>0</td><td>2019-03-13 04:16:57</td></tr> </table> <hr /> <button onClick="highlightLowest()">Highlight</button> 

Answer 5

Here you go. The function 'highlight' takes the column that you want to base your highlighting upon as an argument.

 // Get your table's headers headers = document.querySelectorAll('#table tbody tr th') // Get your table's headers rows = document.querySelectorAll('#table tbody tr') // Declaring function that takes wanted column as argument highlight = (colName) =>{ let min = 0; for(i=0;i<headers.length;i++){ if(headers[i].innerText == colName){ for(j=1;j<rows.length;j++){ value = parseInt(rows[j].children[i].innerHTML); if(j == 1){ min = value; } if(value < min){ rows[j].style.backgroundColor = "yellow" break; } } } } } 

 <table id="table"> <tbody><tr> <th>Test 1</th> <th>Test 2</th> <th>Test 3</th> </tr> <tr> <td>7</td> <td>2</td> <td>3</td> </tr> <tr> <td>3</td> <td>5</td> <td>5</td> </tr> <tr> <td>12</td> <td>1</td> <td>5</td> </tr> <tr> <td>15</td> <td>89</td> <td>4</td> </tr> <tr> <td>3</td> <td>6</td> <td>6</td> </tr> <tr> <td>2</td> <td>4</td> <td>8</td> </tr> </tbody></table> <input type='text' id='col'> <button onclick=highlight(document.getElementById('col').value)>Highlight based on input column</button>