How To Change The Color Of Only One Row In A Table (HTML/JavaScript)

I should make a table which the user will input its data. So we have Product Name and Price and Count as our columns. After this data is filled by the user the 'Sum' column should

Solution 1:

Here you can read about how to change the css of DOM elements using pure JavaScript.

You should add a class or id on the row you want to change the colour and then apply the colour:

document.getElementById("price-row").style.color="blue";

Solution 2:

This is how I would do it: Live demo (click). I added some default values to demonstrate that it works. Just note that both results your looking for could end up being the same row, so I recommending styling both classes differently so that they can both appear on a single element, or changing the approach in general.

<font> is a deprecated tag and should never be used. You had an error in your html because your font tags were not closed: </font>. If the intended use of an input is as a "number", I suggest type="number". I don't see any need for id's on the inputs. Inline style should be avoided. It's best to write styles in CSS. Similarly, inline js should never be used other than for quick testing purposes. Read some of these results: Why is inline JS bad? Instead, use addEventListener in javascript to add the functionality you need. Lastly, document.write() should only be used for writing in fallback scripts for CDN scripts that fail to load. There's no need to write any html here. Just search the existing html and modify it (I recommend adding a class) as needed.

Markup:

<p> Please fill in the table and then click on "Submit Data": </p>

<table class="my-table">
  <thead>
    <tr>
      <td><span>Name of Product</span> </td>
      <td><span>Price</span> </td>
      <td><span>Count</span> </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" value="50"></td>
      <td><input type="number" value="50"></td>
      <td><input type="number" value="50"></td>
    </tr>
    <tr>
      <td><input type="number" value="10"></td>
      <td><input type="number" value="10"></td>
      <td><input type="number" value="10"></td>
    </tr>
    <tr>
      <td><input type="number" value="10"></td>
      <td><input type="number" value="80"></td>
      <td><input type="number" value="10"></td>
    </tr>
</table>

<button id="submit">Submit</button>

JavaScript:

var subBtn = document.getElementById('submit');

subBtn.addEventListener('click', function() {
  highestSum();
  mostExpensive();
});

function mostExpensive() {
  var values = [];
  var cells = document.querySelectorAll('.my-table tbody td');
  for (var i=0; i<cells.length; ++i) {
    var cell = cells[i];
    var input = cell.querySelector('input');
    values.push(Number(input.value));
  }
  var max = Math.max.apply(Math, values);
  var key = values.indexOf(max);
  addClass(cells[key].parentNode, 'most-expensive');
}

function highestSum() {
  var rows = document.querySelectorAll('.my-table tbody tr');
  var sums = [];
  for (var i=0; i<rows.length; ++i) {
    var row = rows[i];
    sums.push(sumRow(row));
  }
  var max = Math.max.apply(Math, sums);
  var key = sums.indexOf(max);
  addClass(rows[key], 'highest-sum');
}

function sumRow(row) {
  var sum = 0;
  var inputs = row.querySelectorAll('input');
  for (var i=0; i<inputs.length; ++i) {
    sum+= Number(inputs[i].value);
  }
  return sum;
}

function addClass(elem, cls) {
  var current = elem.className;
  cls = (current) ? ' '+cls : cls;
  elem.className+= cls;
}