how to highlight table row that match with result

Question

I want to show result by highlight table row when I click calculate button. If it calculates all input, it highlights only table row of bmi itself.

Example if bmi as 17.51, it highlights only the third row in the table (Mild Thinness, 17 - 18.5).

Below is my snippet.

window.addEventListener("load", () => {
    document.getElementById("calculate").addEventListener("click", toBmi);
});
var toBmi = () => {
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    var bmi;
    if(weight > 0 && height > 0) {
        bmi = weight / Math.pow((height/100), 2);
    }
    document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
}
var clearForm = () => {
    document.getElementById("doForm").reset();
    document.getElementById("bmi").innerHTML = " ";
}

table {border-collapse: collapse;}
th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgb(0, 0, 0);
}


    
        
            Weight:
            
            Kg
        
    
    
        
            Height:
            
            Cm
        
    
    
        
        

    
    
        

    


    
        
            Category
            BMI range
        
    
    
        
            Severe Thinness
            <  16
        
        
            Moderate Thinness
            16 - 17
        
        
            Mild Thinness
            17 - 18.5
        
        
            Normal
            18.5 - 25
        
        
            Overweight
            25 - 30
        
        
            Obese Class I
            30 - 35
        
        
            Obese Class II
            35 - 40
        
        
            Obese Class III
            >  40

How can I implement this? I don't know how to make my code work done.

Thanks.

user_9473764 · Answer

One way to do this is to have an array of bmi values which map to each row in the table, then iterate through this array until you find the smallest value which is greater than the actual bmi and add a highlight class to it:

const bmiclass = [0, 16, 17, 18.5, 25, 30, 35, 40, 999]

window.addEventListener("load", () => {
  document.getElementById("calculate").addEventListener("click", toBmi);
});
var toBmi = () => {
  var weight = document.getElementById("weight").value;
  var height = document.getElementById("height").value;
  var bmi;
  if (weight > 0 && height > 0) {
    bmi = weight / Math.pow((height / 100), 2);
  }
  document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
  // remove any existing highlighting
  document.querySelectorAll('[id^="bmi-"]').forEach(e =>
    e.classList.remove('highlight'));
  // highlight the selected range
  for (let i = 0; i < bmiclass.length; i++) {
    if (bmi <= bmiclass[i]) {
      document.getElementById('bmi-' + i).classList.add('highlight');
      break;
    }
  }
}
var clearForm = () => {
  document.getElementById("doForm").reset();
  document.getElementById("bmi").innerHTML = " ";
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid rgb(0, 0, 0);
}

.highlight {
  background-color: cyan;
}


  
    
      Weight:
      
      Kg
    
  
  
    
      Height:
      
      Cm
    
  
  
    
    

  
  
    

  


  
    
      Category
      BMI range
    
  
  
    
      Severe Thinness
      <  16
    
    
      Moderate Thinness
      16 - 17
    
    
      Mild Thinness
      17 - 18.5
    
    
      Normal
      18.5 - 25
    
    
      Overweight
      25 - 30
    
    
      Obese Class I
      30 - 35
    
    
      Obese Class II
      35 - 40
    
    
      Obese Class III
      >  40

user_65232 · Answer

Here are the steps as I see them.

Give your script some data points to work with: include data attributes on each row, e.g. (read more about data attributes here)
Get all the rows with the data attributes (document.querySelectorAll('[data-range-min]');)
Iterate through them and figure out which one your value falls into
Add a CSS class to the one that matches (elem.classList.add("highlight");)

P.S.: If bmi is calculated multiple times you want to clear the highlight class from all the rows first - after step 2 would be a good time to do it. Read more about classList here.

user_378779 · Answer

Iterate through a list of ranges and highlight the row that corresponds to that range:

var toBmi = () => {
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    var bmi;
    if (weight > 0 && height > 0) {
        bmi = weight / Math.pow((height / 100), 2);
        console.log("bmi=" + bmi);

        [
            [0, 16],
            [16, 17],
            [18, 18.5],
            [18.5, 25],
            [25, 30],
            [30, 35],
            [35, 40],
            [40, 999],
        ].forEach(function (range, i) {
            console.log('got ' + i);
            var elmt = document.getElementById('bmi-' + (i + 1))
            if (bmi >= range[0] && bmi < range[1]) {
                console.log("Highlighting " + i);

                if (elmt) {
                    elmt.style.backgroundColor = 'red';
                }
            } else {
                if (elmt) {
                    elmt.style.backgroundColor = 'white';
                }
            }
        });
        document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
    }
}

user_8672824 · Answer

Taking reference from @montrealist answer's

    table {
            border-collapse: collapse;
        }

        th,
        td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgb(0, 0, 0);
        }

        .highlight {
            background-color: cyan;
        }

    
        
            
                Weight:
                
                Kg
            
        
        
            
                Height:
                
                Cm
            
        
        
            
            

        
        
            

        
    
    
        
            
                Category
                BMI range
            
        
        
            
                Severe Thinness
                <  16
            
            
                Moderate Thinness
                16 - 17
            
            
                Mild Thinness
                17 - 18.5
            
            
                Normal
                18.5 - 25
            
            
                Overweight
                25 - 30
            
            
                Obese Class I
                30 - 35
            
            
                Obese Class II
                35 - 40
            
            
                Obese Class III
                >  40

    window.addEventListener("load", () => {
            document.getElementById("calculate").addEventListener("click", toBmi);
        });
        var toBmi = () => {
            var weight = document.getElementById("weight").value;
            var height = document.getElementById("height").value;
            var bmi;
            if (weight > 0 && height > 0) {
                bmi = weight / Math.pow((height / 100), 2);
            }
            document.getElementById("bmi").innerHTML = bmi == undefined ? " " : "BMI = " + bmi.toFixed(2);
            // code for highlight the background    
            document.querySelectorAll('[data-range-min]').forEach(v => {
                let isHighlight = (bmi >= +v.dataset.rangeMin && bmi < +v.dataset.rangeMax)
                v.classList.toggle("highlight", isHighlight);
            })

        }
        var clearForm = () => {
            document.getElementById("doForm").reset();
            document.getElementById("bmi").innerHTML = " ";
        }

how to highlight table row that match with result

4 Answers