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

Question

我正在尝试计算列号，当我选择已婚总计时只显示已婚，当我选择未婚总计时只显示未婚，如果以上总计都没有显示。

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>

只是我想计算特定的选定值。如果有任何解决方案，请帮助我并提前致谢。

Answer 1

您可以使用 each 循环遍历 .content，检查文本是否包含在数组中，如果包含，则显示并添加总数。

注意:我在 td 总数中添加了一个 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 filter 来过滤包含所选值的 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>