点击函数如何计算行总数

Question

点击函数如何计算行总数

3

当我选择已婚时，只显示已婚，当我选择未婚时，只显示未婚，并且如果两者都没有选择，则显示总数。我试图计算列号。

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>

我想计算特定选定的值。如有解决方案，请帮忙，先行致谢。

- Pradeep Dhakad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eddie · Accepted Answer

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

注意：我添加了一个id到td总计。这样做是为了更容易地更新单元格。

"Original Answer" 翻译成 "最初的回答"

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。您可以reduce显示的tr以获取总数。"Original Answer"的翻译是"最初的回答"。

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>