jQuery根据表标签<td>和复选框选择

时间：2020-03-19 09:48:20

标签： javascript jquery

我有一张发票表，但是否检查有问题。 如果选中，我要计算所有类型的标签td的所有类型，如果不选中，则不计算，但是现在，已经为所有值计算了。 例如 如果我检查设计而不检查freelencer，则计算为10 + 0，如果我检查设计和freelencer，则计算为10 + 12 

 $('table').on('mouseup keyup', 'input[type=number]', () => calculateTotals());

$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('$0.00');
  $newRow.insertAfter($lastRow);

  $newRow.find('input:first').focus();
});

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input[type=number]');
  const subtotal = inputs[0].value + inputs[1].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}
.invoice-box {
  max-width: 800px;
  margin: auto;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  font-size: 16px;
  line-height: 24px;
  font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  color: #555;
}

.invoice-box table {
  width: 100%;
  line-height: inherit;
  text-align: left;
}

.invoice-box table td {
  padding: 5px;
  vertical-align: top;
}

.invoice-box table tr td:nth-child(n+2) {
  text-align: right;
}

.invoice-box table tr.top table td {
  padding-bottom: 20px;
}

.invoice-box table tr.top table td.title {
  font-size: 45px;
  line-height: 45px;
  color: #333;
}

.invoice-box table tr.information table td {
  padding-bottom: 40px;
}

.invoice-box table tr.heading td {
  background: #eee;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.invoice-box table tr.details td {
  padding-bottom: 20px;
}

.invoice-box table tr.item td{
  border-bottom: 1px solid #eee;
}

.invoice-box table tr.item.last td {
  border-bottom: none;
}

.invoice-box table tr.item input {
  padding-left: 5px;
}

.invoice-box table tr.item td:first-child input {
  margin-left: -5px;
  width: 100%;
}

.invoice-box table tr.total td:nth-child(2) {
  border-top: 2px solid #eee;
  font-weight: bold;
}

.invoice-box input[type=number] {
  width: 60px;
}

@media only screen and (max-width: 600px) {
  .invoice-box table tr.top table td {
      width: 100%;
      display: block;
      text-align: center;
  }
  
  .invoice-box table tr.information table td {
      width: 100%;
      display: block;
      text-align: center;
  }
}

/** RTL **/
.rtl {
  direction: rtl;
  font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}

.rtl table {
  text-align: right;
}

.rtl table tr td:nth-child(2) {
  text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
      <tr class="top">
        <td colspan="4">
          <table>
            <tr>
              <td class="title">
                <img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
              </td>
  
              <td>
                Invoice #: 123<br> Created: January 1, 2015<br> Due: February 1, 2015
              </td>
            </tr>
          </table>
        </td>
      </tr>
  
      <tr class="information">
        <td colspan="4">
          <table>
            <tr>
              <td>
                Sparksuite, Inc.<br> 12345 Sunny Road<br> Sunnyville, CA 12345
              </td>
  
              <td>
                Acme Corp.<br> John Doe<br> john@example.com
              </td>
            </tr>
          </table>
        </td>
      </tr>
  
      <tr class="heading">
        <td colspan="3">
          Payment Method
        </td>
  
        <td>
          Check #
        </td>
      </tr>
  
      <tr class="details">
        <td colspan="3">
          Check
        </td>
  
        <td>
          1000
        </td>
      </tr>
  
      <tr class="heading">
        <td>
          Item
        </td>
  
        <td>
          Unit Cost
        </td>
  
        <td>
          Quantity
        </td>
  
        <td>
          Price
        </td>
      </tr>
  
      <tr class="item">
        <td>
          <input value="Website design" />
        </td>
  
        <td>
          $<input type="number" value="10" />
          <input type="checkbox" value="Design"> Design<br>
          $<input type="number" value="12" />
          <input type="checkbox" value="Freelencer">  Freelencer
        </td>
  
        <td>
          <input type="number" value="1" />
        </td>
  
        <td>
          $300.00
        </td>
      </tr>
  
      <tr class="item">
        <td>
          <input value="Programmer" />
        </td>
  
        <td>
          $<input type="number" value="10" />
          <input type="checkbox" value="Design"> Coding<br>
          $<input type="number" value="12" />
          <input type="checkbox" value="Freelencer">  Freelencer
        </td>
  
        <td>
          <input type="number" value="1" />
        </td>
  
        <td>
          $75.00
        </td>
      </tr>
  
      <tr class="item">
        <td>
          <input value="Server Administrator" />
        </td>
  
        <td>
          $<input type="number" value="10" />
          <input type="checkbox" value="Design"> Design<br>
          $<input type="number" value="12" />
          <input type="checkbox" value="Freelencer">  Freelencer
        </td>
  
        <td>
          <input type="number" value="1" />
        </td>
  
        <td>
          $10.00
        </td>
      </tr>
  
      <tr>
        <td colspan="4">
          <button class="btn-add-row">Add row</button>
        </td>
      </tr>
  
      <tr class="total">
        <td colspan="3"></td>
  
        <td>
          Total: $385.00
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

您遇到的第一个问题是对两个字符串值使用+运算符，以便将它们连接在一起。要执行加法，您需要将它们转换为数值，在这种情况下，可以使用parseFloat()。

关于仅计算检查值的问题，可以使用:checkbox:checked选择器仅检索那些框，然后将其值相加。另外，您需要将结果乘以同一行中的“数量”字段。为了简化操作，我向该输入添加了一个.quantity类。

最后，您还需要在页面加载时调用calculateTotals，以便显示当前表单状态的正确总计以及任何复选框的更改。

话虽如此，请尝试以下操作：

$('table')
  .on('input', 'input[type="number"]', () => calculateTotals())
  .on('change', ':checkbox', () => calculateTotals());
  
calculateTotals();

$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('$0.00');
  $newRow.insertAfter($lastRow);
  $newRow.find('input:first').focus();
});

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

function calculateSubtotal(row) {
  const $row = $(row);
  let subtotal = 0;
  let qty = parseInt($row.find('.quantity').val(), 10);
  $row.find(':checkbox:checked').each(function() {
    subtotal += (parseFloat($(this).closest('label').prev().val()) * qty) || 0;
  })
  $row.find('td:last').text(formatAsCurrency(subtotal));
  return subtotal;
}

function formatAsCurrency(amount) {
  return `$${parseFloat(amount).toFixed(2)}`;
}
.invoice-box {
  max-width: 800px;
  margin: auto;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  font-size: 16px;
  line-height: 24px;
  font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  color: #555;
}

.invoice-box table {
  width: 100%;
  line-height: inherit;
  text-align: left;
}

.invoice-box table td {
  padding: 5px;
  vertical-align: top;
}

.invoice-box table tr td:nth-child(n+2) {
  text-align: right;
}

.invoice-box table tr.top table td {
  padding-bottom: 20px;
}

.invoice-box table tr.top table td.title {
  font-size: 45px;
  line-height: 45px;
  color: #333;
}

.invoice-box table tr.information table td {
  padding-bottom: 40px;
}

.invoice-box table tr.heading td {
  background: #eee;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.invoice-box table tr.details td {
  padding-bottom: 20px;
}

.invoice-box table tr.item td {
  border-bottom: 1px solid #eee;
}

.invoice-box table tr.item.last td {
  border-bottom: none;
}

.invoice-box table tr.item input {
  padding-left: 5px;
}

.invoice-box table tr.item td:first-child input {
  margin-left: -5px;
  width: 100%;
}

.invoice-box table tr.total td:nth-child(2) {
  border-top: 2px solid #eee;
  font-weight: bold;
}

.invoice-box input[type=number] {
  width: 60px;
}

@media only screen and (max-width: 600px) {
  .invoice-box table tr.top table td {
    width: 100%;
    display: block;
    text-align: center;
  }
  .invoice-box table tr.information table td {
    width: 100%;
    display: block;
    text-align: center;
  }
}


/** RTL **/

.rtl {
  direction: rtl;
  font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}

.rtl table {
  text-align: right;
}

.rtl table tr td:nth-child(2) {
  text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
      <!-- irrelevant rows removed -->
      <tr class="heading">
        <td colspan="3">Payment Method</td>
        <td>Check #</td>
      </tr>
      <tr class="details">
        <td colspan="3">Check</td>
        <td>1000</td>
      </tr>
      <tr class="heading">
        <td>Item</td>
        <td>Unit Cost</td>
        <td>Quantity</td>
        <td>Price</td>
      </tr>
      <tr class="item">
        <td>
          <input value="Website design" />
        </td>
        <td>
          $<input type="number" value="10" />
          <label><input type="checkbox" value="Design"> Design</label><br>           
          $<input type="number" value="12" />
          <label><input type="checkbox" value="Freelencer"> Freelencer</label>
        </td>
        <td>
          <input type="number" value="1" class="quantity" />
        </td>
        <td></td>
      </tr>
      <tr class="item">
        <td>
          <input value="Programmer" />
        </td>
        <td>
          $<input type="number" value="10" />
          <label><input type="checkbox" value="Design"> Design</label><br>           
          $<input type="number" value="12" />
          <label><input type="checkbox" value="Freelencer"> Freelencer</label>
        </td>
        <td>
          <input type="number" value="1" class="quantity" />
        </td>
        <td></td>
      </tr>
      <tr class="item">
        <td>
          <input value="Server Administrator" />
        </td>
        <td>
          $<input type="number" value="10" />
          <label><input type="checkbox" value="Design"> Design</label><br>           
          $<input type="number" value="12" />
          <label><input type="checkbox" value="Freelencer"> Freelencer</label>
        </td>
        <td>
          <input type="number" value="1" class="quantity" />
        </td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4">
          <button class="btn-add-row">Add row</button>
        </td>
      </tr>
      <tr class="total">
        <td colspan="3"></td>
        <td></td>
      </tr>
    </table>
  </div>

相关问题
最新问题