CODEWITHSUNDEEP
javascripthtmlcss
Patt.M
Patt.M

Reputation: 59

how to highlight table row that match with result

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);
}
<form id="doForm">
    <div class="rowTab-1">
        <div class="label-left">
            <label id="weight-label" for="weight">Weight:</label>
            <input type="text" name="weight" class="form-input" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">
            <label id="unit-label" for="weightUnit">Kg</label>
        </div>
    </div>
    <div class="rowTab-2">
        <div class="label-left">
            <label id="height-label" for="height">Height:</label>
            <input type="text" name="height" class="form-input" id="height" size="10" maxlength="4" onkeypress="if(this.value.length > 3) return false;">
            <label id="unit-label" for="heightUnit">Cm</label>
        </div>
    </div>
    <div class="buttons">
        <button type="button" id="calculate">calculate</button>
        <button type="button" id="clear" onclick="clearForm()">clear</button><br>
    </div>
    <div class="showResult">
        <span id="bmi"></span><br>
    </div>
</form>
<table id="resultBmiTable">
    <thead>
        <tr>
            <th>Category</th>
            <th>BMI range</th>
        </tr>
    </thead>
    <tbody>
        <tr id="bmi-1">
            <td>Severe Thinness</td>
            <td>&lt;	&nbsp;16</td>
        </tr>
        <tr id="bmi-2">
            <td>Moderate Thinness</td>
            <td>16 - 17</td>
        </tr>
        <tr id="bmi-3">
            <td>Mild Thinness</td>
            <td>17 - 18.5</td>
        </tr>
        <tr id="bmi-4">
            <td>Normal</td>
            <td>18.5 - 25</td>
        </tr>
        <tr id="bmi-5">
            <td>Overweight</td>
            <td>25 - 30</td>
        </tr>
        <tr id="bmi-6">
            <td>Obese Class I</td>
            <td>30 - 35</td>
        </tr>
        <tr id="bmi-7">
            <td>Obese Class II</td>
            <td>35 - 40</td>
        </tr>
        <tr id="bmi-8">
            <td>Obese Class III</td>
            <td>&gt;	&nbsp;40</td>
        </tr>
    </tbody>
</table>

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

Thanks.

Upvotes: 3

Views: 410

Answers (4)

SUDHIR KUMAR
SUDHIR KUMAR

Reputation: 419

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


    <form id="doForm">
        <div class="rowTab-1">
            <div class="label-left">
                <label id="weight-label" for="weight">Weight:</label>
                <input type="text" name="weight" class="form-input" id="weight" size="10" maxlength="6"
                    onkeypress="if(this.value.length > 5) return false;">
                <label id="unit-label" for="weightUnit">Kg</label>
            </div>
        </div>
        <div class="rowTab-2">
            <div class="label-left">
                <label id="height-label" for="height">Height:</label>
                <input type="text" name="height" class="form-input" id="height" size="10" maxlength="4"
                    onkeypress="if(this.value.length > 3) return false;">
                <label id="unit-label" for="heightUnit">Cm</label>
            </div>
        </div>
        <div class="buttons">
            <button type="button" id="calculate">calculate</button>
            <button type="button" id="clear" onclick="clearForm()">clear</button><br>
        </div>
        <div class="showResult">
            <span id="bmi"></span><br>
        </div>
    </form>
    <table id="resultBmiTable">
        <thead>
            <tr>
                <th>Category</th>
                <th>BMI range</th>
            </tr>
        </thead>
        <tbody>
            <tr id="bmi-1" data-range-min="0" data-range-max="16">
                <td>Severe Thinness</td>
                <td>&lt; &nbsp;16</td>
            </tr>
            <tr id="bmi-2" data-range-min="16" data-range-max="17">
                <td>Moderate Thinness</td>
                <td>16 - 17</td>
            </tr>
            <tr id="bmi-3" data-range-min="17" data-range-max="18.5">
                <td>Mild Thinness</td>
                <td>17 - 18.5</td>
            </tr>
            <tr id="bmi-4" data-range-min="18.5" data-range-max="25">
                <td>Normal</td>
                <td>18.5 - 25</td>
            </tr>
            <tr id="bmi-5" data-range-min="25" data-range-max="30">
                <td>Overweight</td>
                <td>25 - 30</td>
            </tr>
            <tr id="bmi-6" data-range-min="30" data-range-max="35">
                <td>Obese Class I</td>
                <td>30 - 35</td>
            </tr>
            <tr id="bmi-7" data-range-min="35" data-range-max="40">
                <td>Obese Class II</td>
                <td>35 - 40</td>
            </tr>
            <tr id="bmi-8" data-range-min="40" data-range-max="100">
                <td>Obese Class III</td>
                <td>&gt; &nbsp;40</td>
            </tr>
        </tbody>
    </table>


    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 = " ";
        }

Upvotes: 1

Nick
Nick

Reputation: 147146

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;
}
<form id="doForm">
  <div class="rowTab-1">
    <div class="label-left">
      <label id="weight-label" for="weight">Weight:</label>
      <input type="text" name="weight" class="form-input" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">
      <label id="unit-label" for="weightUnit">Kg</label>
    </div>
  </div>
  <div class="rowTab-2">
    <div class="label-left">
      <label id="height-label" for="height">Height:</label>
      <input type="text" name="height" class="form-input" id="height" size="10" maxlength="4" onkeypress="if(this.value.length > 3) return false;">
      <label id="unit-label" for="heightUnit">Cm</label>
    </div>
  </div>
  <div class="buttons">
    <button type="button" id="calculate">calculate</button>
    <button type="button" id="clear" onclick="clearForm()">clear</button><br>
  </div>
  <div class="showResult">
    <span id="bmi"></span><br>
  </div>
</form>
<table id="resultBmiTable">
  <thead>
    <tr>
      <th>Category</th>
      <th>BMI range</th>
    </tr>
  </thead>
  <tbody>
    <tr id="bmi-1">
      <td>Severe Thinness</td>
      <td>&lt; &nbsp;16</td>
    </tr>
    <tr id="bmi-2">
      <td>Moderate Thinness</td>
      <td>16 - 17</td>
    </tr>
    <tr id="bmi-3">
      <td>Mild Thinness</td>
      <td>17 - 18.5</td>
    </tr>
    <tr id="bmi-4">
      <td>Normal</td>
      <td>18.5 - 25</td>
    </tr>
    <tr id="bmi-5">
      <td>Overweight</td>
      <td>25 - 30</td>
    </tr>
    <tr id="bmi-6">
      <td>Obese Class I</td>
      <td>30 - 35</td>
    </tr>
    <tr id="bmi-7">
      <td>Obese Class II</td>
      <td>35 - 40</td>
    </tr>
    <tr id="bmi-8">
      <td>Obese Class III</td>
      <td>&gt; &nbsp;40</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

kmoser
kmoser

Reputation: 9273

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

Upvotes: 1

montrealist
montrealist

Reputation: 5693

Here are the steps as I see them.

  1. Give your script some data points to work with: include data attributes on each row, e.g. <tr id="bmi-2" data-range-min="16" data-range-max="17"> (read more about data attributes here)
  2. Get all the rows with the data attributes (document.querySelectorAll('[data-range-min]');)
  3. Iterate through them and figure out which one your value falls into
  4. 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.

Upvotes: 1

Related Questions