javascript - 来自多个表、多行、同一页的值

Question

有一个网页，其中包含 3 个表格。页面加载中的“ Total Opt Out ”是每个表、所有行、所有值的总和。

当从表中选择每个记录时，该行中的所有值都应加在一起并从总计中减去。

如果选择了整个表格，则应将所有行的所有值相加并从“ Total Opt Out ”值中减去。

有多个表，检查和取消检查记录/表，发现它很困难。我已经发布了我的代码。请给我一个关于如何解决这个问题的想法？

代码如下：

$(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>

标签： javascriptjqueryhtml

Answer 1

由于您使用的是 jQuery，因此您可以使用一些额外的类来实现这一点，例如：

$(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>