jQuery动态增删表格行场景下如何统计性别数量？

嘿，作为jQuery新手，这个需求其实很好实现！咱们可以通过遍历表格中的性别下拉框来统计数量，还可以做一个实时更新的统计区域，让数据变化一目了然。下面是修改后的完整代码，我会一步步给你解释：

实现思路 #

1. 编写一个统计函数，遍历表格里所有非表头的行，读取每个行的性别下拉框值
2. 分别统计Male(M)和Female(F)的数量
3. 在添加行、删除行、切换性别选择这几个关键节点自动触发统计，确保数据实时准确

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>jQuery add/remove rows in html table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
/* 给统计区域加个简单样式，看起来更清晰 */
.stat-container {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>
</head>
<body>
<script>
function arrangeSno() {
  var i=0;
  $('#pTable tr').each(function() {
    $(this).find(".sNo").html(i);
    i++;
  });
  // 重新排列序号后同步更新统计
  updateGenderStats();
}

// 核心：统计性别的函数
function updateGenderStats() {
  var maleCount = 0;
  var femaleCount = 0;
  
  // 遍历表格中除第一行（表头）外的所有行
  $('#pTable tr:not(:first)').each(function() {
    var genderVal = $(this).find('select[name="gender"]').val();
    if (genderVal === 'M') {
      maleCount++;
    } else if (genderVal === 'F') {
      femaleCount++;
    }
  });
  
  // 将统计结果更新到页面上
  $('#male-count').text(maleCount);
  $('#female-count').text(femaleCount);
}

$(document).ready(function(){
  $('#addButId').click(function(){
    var sno=$('#pTable tr').length;
    trow= "<tr><td class='sNo'>"+sno+"</td>"+
    "<td><input name='pName' type='text'></td>"+
    "<td><input name='age' type='text'></td>"+
    "<td><select name='gender'><option value='M'>Male</option><option value='F'>Female</option></select></td>"+
    "<td><button type='button' class='rButton'>Remove</button></td></tr>";
    $('#pTable').append(trow);
    // 添加行后立即更新统计
    updateGenderStats();
    
    // 给新添加的性别下拉框绑定变化事件，切换性别时实时更新统计
    $('#pTable tr:last select[name="gender"]').on('change', updateGenderStats);
  });
  
  // 给页面初始的下拉框绑定变化事件（如果后续初始有数据也能生效）
  $('select[name="gender"]').on('change', updateGenderStats);
});

$(document).on('click', 'button.rButton', function () {
  $(this).closest('tr').remove();
  arrangeSno();
  return false;
});
</script>
<h1>jQuery Add Remove Rows Dynamically in a Html Table Example</h1>
<form method="post" action="Process">
<p>Enter Passenger Details. Press Add Passengers button to add more passengers.</p>

<!-- 新增统计结果展示区域 -->
<div class="stat-container">
  <strong>性别统计：</strong>
  男性：<span id="male-count">0</span> | 女性：<span id="female-count">0</span>
</div>

<table id="pTable">
<tbody>
<tr>
<td>S.No</td>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
<td>Action</td>
</tr>
</tbody></table>
<br/>
<input id="addButId" type="button" value="Add Passengers">
<br><input type="submit" value="Submit">
</form>
</body>
</html>

关键代码解释 #

1. updateGenderStats()函数：这是统计功能的核心，它会跳过表头行，逐个读取每行的性别下拉框值，分别计数后更新页面上的统计数字。
2. 事件触发时机：
   • 添加新行后立即调用统计函数，同时给新行的下拉框绑定change事件，确保切换性别时统计实时更新
   • 删除行后，在重新排列序号的函数末尾调用统计，保证数据同步
   • 页面加载时给已有下拉框绑定change事件，覆盖所有性别选择变化的场景
3. 统计展示区域：新增了一个简单的容器来展示统计结果，让数据变化更直观

这样不管是添加行、删除行，还是切换性别选择，统计数字都会自动更新，完全满足你的需求～

内容的提问来源于stack exchange，提问作者Debasish Ghosh