Values from multiple tables, Multiple rows, Same page

Question

There is a web page, which contains 3 tables. "Total Opt Out" on page load is the sum of values from each table, all the rows, all the values.

When every record from the table is selected all the values from that row should be added together and subtracted from the total.

If the entire table is selected then all the values from all the rows should be added together and subtracted from "Total Opt Out" value.

With multiple tables, check and un-check records/ tables, finding it difficult. I have posted my code. Please provide me an idea on how to solve this?

Code as follows:

$(document).ready(function() {
  $("#countUS").click(function() {
    var table = document.getElementById("countryUS");
    var val = table.rows[0].cells[0].children[0].checked;
    var totalCountUSA = 0;
    for (var i = 1; i < table.rows.length; i++) {
      table.rows[i].cells[0].children[0].checked = val;
    }
    if (val === true) {
      $('#countryUS :checked').each(function() {
        var totalAmount = $(this).parents('tr:eq(0)');
        if ($(totalAmount).find('td:eq(2)').text() != '') {
          totalCountUSA += Number($(totalAmount).find('td:eq(2)').text().replace(/[^0-9.-]+/g, "")) +
            Number($(totalAmount).find('td:eq(3)').text().replace(/[^0-9.-]+/g, "")) +
            Number($(totalAmount).find('td:eq(4)').text().replace(/[^0-9.-]+/g, ""));
        }
        $('#totalOptOut').val(totalCountUSA);
      });
    } else {
      $('#totalOptOut').val("0.00");
    }
  });
});

function calculateTotal(countryCode) {
  var theTable = 0;
  var theTotal;
  var countChecked = 0;

  theTable = document.getElementById(countryCode);

  for (x = 0; x < theTable.tBodies[0].rows.length; x++) {
    for (y = 0; y < theTable.tBodies[0].rows[x].cells[0].children.length; y++) {
      if (theTable.tBodies[0].rows[x].cells[0].children[y].tagName.toUpperCase() == "INPUT") {
        if (theTable.tBodies[0].rows[x].cells[0].children[y].type.toUpperCase() == "CHECKBOX") {
          if (theTable.tBodies[0].rows[x].cells[0].children[y].checked == false) {
            if (theTable.tBodies[0].rows[x].cells[2].textContent) {
              theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].textContent.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[3].textContent.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[4].textContent.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[5].textContent.toString().replace(/\$|\,/g, '')));
            } else {
              theTotal += (parseFloat(theTable.tBodies[0].rows[x].cells[2].innerText.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[3].innerText.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[4].innerText.toString().replace(/\$|\,/g, '')) +
                parseFloat(theTable.tBodies[0].rows[x].cells[5].innerText.toString().replace(/\$|\,/g, '')));
            }
            countChecked++;
          }
          break;
        }
      }
    }
  }
  if (countChecked === theTable.tBodies[0].rows.length) {
    if (countryCode === countryUS)
      document.getElementById("countUS").checked = true;
    else if (countryCode === countryCAN)
      document.getElementById("countUS").checked = true;
  } else {
    if (countryCode === countryUS)
      document.getElementById("countUS").checked = false;
    else if (countryCode === countryCAN)
      document.getElementById("countUS").checked = false;
  }
  $("totalOptOut").val(theTotal);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Total Opt Out: <input type="text" id="totalOptOut" value="24750" disabled>
</p>
<table id="countryUS">
  <thead>
    <tr>
      <th><input type="checkbox" id="countUS"> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="state" value="Texas" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="state" value="Arkansas" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="state" value="Arizona" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>
<table id="countryCAN">
  <thead>
    <tr>
      <th><input type="checkbox"> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="province" value="Ontario" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="province" value="Qubec" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" name="province" value="Alberta" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>
<table id="countryMEX">
  <thead>
    <tr>
      <th><input type="checkbox"> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" name="state" value="Jalisco" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" name="state" value="Puebla" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" name="state" value="Oaxaca" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>

Are you using formatNumber function from here...4guysfromrolla.com/webtech/code/FormatNumber.shtml ??? — Any Moose
– Any Moose, Commented Sep 10, 2018 at 15:34

Zakaria Acharki · Accepted Answer · 2018-09-10 16:23:47Z

Since you're using the jQuery you could achieve that using some extra classes like :

$(document).ready(function() {
  var inputs_selector = '[name="men"],[name="women"],[name="kids"]';

  //Check the clicked table rows
  $(".check").change(function() {
    var inputs = $(this).closest('tr').find(inputs_selector);

    if ($(this).is(':checked')) {
      inputs.addClass('selected');
    } else {
      inputs.removeClass('selected');
    }

    calculateTotal();
  });

  //Check all the table rows
  $(".check-all").click(function() {
    var self = $(this);

    $(this).closest('table').find(':checkbox').not(this).each(function() {
      $(this).prop('checked', self.is(':checked')).change()
    })

    calculateTotal();
  });

  calculateTotal();
});


//Calculate the total of all tables
function calculateTotal() {
  var total = 0;
  var inputs_selector = '[name="men"]:not(".selected"),[name="women"]:not(".selected"),[name="kids"]:not(".selected")';

  $('table').each(function() {
    var inputs = $(this).find(inputs_selector);

    inputs.each(function() {
      total += Number($(this).val());
    });
  })

  $('#totalOptOut').val(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Total Opt Out: <input type="text" id="totalOptOut" value="0" disabled>
</p>
<table id="countryUS">
  <thead>
    <tr>
      <th><input type="checkbox" class='check-all' id="countUS"> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="state" value="Texas" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="state" value="Arkansas" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="state" value="Arizona" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>
<table id="countryCAN">
  <thead>
    <tr>
      <th><input type="checkbox" class='check-all'> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="province" value="Ontario" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="province" value="Qubec" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check'></td>
      <td><input type="text" name="province" value="Alberta" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>
<table id="countryMEX">
  <thead>
    <tr>
      <th><input type="checkbox" class='check-all'> </th>
      <th>State</th>
      <th>Men</th>
      <th>Women</th>
      <th>Kids (Under age 12)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class='check' /></td>
      <td><input type="text" name="state" value="Jalisco" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check' /></td>
      <td><input type="text" name="state" value="Puebla" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
    <tr>
      <td><input type="checkbox" class='check' /></td>
      <td><input type="text" name="state" value="Oaxaca" disabled></td>
      <td><input type="text" name="men" value="1000" disabled></td>
      <td><input type="text" name="women" value="1000" disabled></td>
      <td><input type="text" name="kids" value="750" disabled></td>
    </tr>
  </tbody>
</table>

Thank you so much for your reply. I will try implementing the same and will keep you posted on how it goes... Thanks a ton... :)
Glad I could help sister, if the answer is what you're looking for Mark it as the correct answer for the future readers.
Just one more question, if i use the name diff for each rows how can i achieve the same? If i am iterating this using a for loop, and names are like men-1, women-1, kid-1 .... men-n, women-n... kid-n respectively...
You could use '[name^="men-"],[name^="women-"],[name^="kids-"]'.

Collectives™ on Stack Overflow

Values from multiple tables, Multiple rows, Same page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related