Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<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>
  
  
</body>
</html>
 
.my-table {
  border: 5px solid #333366;
}
.my-table thead td span {
  background-color: #0F0;
}
.my-table .highest-sum {
  background: blue;
}
.my-table .most-expensive {
  background: red;
}
 
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;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers