javascript-如何计算行总数onclick函数

当我选择已婚总数仅显示为已婚,并且当我选择未婚总数仅显示为未婚,并且如果以上总数均未显示时,我试图计算列数.

function filterText() {
  var rex = new RegExp($('#filterText').val().join('|'));
  if (rex == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rex.test($(this).text());
    }).show();
  }

}

function clearFilter() {
  $('.filterText').val('');
  $('.content').show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
  <option disabled selected>Select</option>
  <option value='1'>Married</option>
  <option value='2'>Unmarried</option>
  <option value='all'>All</option>
</select>



<table id="table_format" border="1px">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Number</th>
      <th>Married
      </th>
    </tr>
  </thead>
  <tbody>

    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>25</td>
      <td>Married</td>
    </tr>

    <tr class="content">
      <td>1</td>
      <td>Larry</td>
      <td>20</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>15</td>
      <td>Married</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Jacob</td>
      <td>30</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Larry</td>
      <td>5</td>
      <td>Unmarried</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Total</td>
      <td>800</td>
      <td>All</td>
    </tr>
  </tbody>
</table>

我只想计算特定的选定值.
如果有任何解决方案,请帮助我,谢谢.

最佳答案

您可以使用每个循环遍历.content,检查文本是否包含在数组中(如果包含),显示并添加总数.

注意：我在td total中添加了一个ID.这是为了使更新单元格更加容易.

function filterText() {

  var data = $("#filterText").val();
  var isAll = data.includes("All");
  var total = 0;

  $(".content").hide().each(function() {
    if (isAll || data.includes($(this).find("td:eq(3)").text().trim())) {
      $(this).show();
      total += +$(this).find("td:eq(2)").text();
    }
  })

  $("#total").text(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
  <option disabled selected>Select</option>
  <option value='Married'>Married</option>
  <option value='Unmarried'>Unmarried</option>
  <option value='Widow'>Widow</option>
  <option value='All'>All</option>
</select>



<table id="table_format" border="1px">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Number</th>
      <th>Married
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>25</td>
      <td>Married</td>
    </tr>
    <tr class="content">
      <td>1</td>
      <td>Larry</td>
      <td>20</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>15</td>
      <td>Married</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Jacob</td>
      <td>30</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Larry</td>
      <td>5</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Larry</td>
      <td>30</td>
      <td>Widow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Total</td>
      <td id="total">800</td>
      <td>All</td>
    </tr>
  </tbody>
</table>

或者,您可以使用jQuery过滤器来过滤包含所选值的tr.您可以减少显示的tr以获得总计.

function filterText() {
  var data = $("#filterText").val();
  var shown = $(".content").hide().filter(function() {
    return data.includes($(this).find("td:eq(3)").text().trim()) || data.includes("All");
  }).show().get();

  var total = shown.reduce((c,v) => {
    return c + +$(v).find("td:eq(2)").text()
  },0);

  $("#total").text(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
  <option disabled selected>Select</option>
  <option value='Married'>Married</option>
  <option value='Unmarried'>Unmarried</option>
  <option value='Widow'>Widow</option>
  <option value='All'>All</option>
</select>



<table id="table_format" border="1px">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Number</th>
      <th>Married
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>25</td>
      <td>Married</td>
    </tr>
    <tr class="content">
      <td>1</td>
      <td>Larry</td>
      <td>20</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>1</td>
      <td>Mark</td>
      <td>15</td>
      <td>Married</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Jacob</td>
      <td>30</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Larry</td>
      <td>5</td>
      <td>Unmarried</td>
    </tr>
    <tr class="content">
      <td>2</td>
      <td>Larry</td>
      <td>30</td>
      <td>Widow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Total</td>
      <td id="total">800</td>
      <td>All</td>
    </tr>
  </tbody>
</table>