如何獲得所有輸入附加行的性別之和
[英]how do get sum of gender of all input appended row
問題描述
這是一個jQuery“在HTML表格中動態添加刪除行”的示例。 使用添加乘客按鈕，將添加一行。 如何計算此表上的性別總和。 我想計算所有性別輸入附加行的總和。 如何計算性別總和？ 我對jQuery非常了解...有人可以幫助我嗎？
<!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>
</head>
<body>
<script>
function arrangeSno()
{
var i=0;
$('#pTable tr').each(function() {
$(this).find(".sNo").html(i);
i++;
});
}
$(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);
});
});
$(document).on('click', 'button.rButton', function () {
$(this).closest('tr').remove();
arrangeSno();
return false;
});
/*$(".rButton").live('click', 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>
<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>
2 個解決方案
解決方案1
0 2018-01-27 06:50:56
首先，獲取所有性別<select> ：
var $genderSelects = $('select[name="gender"]');
然后，您可以使用jQuery的map函數獲取它們的值，該函數遍歷選擇並返回基於每個選擇的值（在這種情況下，根據其在DOM中的實際值）：
var values = $genderSelects.map(function(i, select) {
return $(select).val();
});
最后，您將這些值相加。 一種方便的方法是使用reduce語句：
var sum = values.reduce(function(memo, value) {
// The first time through memo = 0
// The second time through it's the first value
// the third time through it's the first + second values
// and so on
return memo + parseInt(value);
}, 0);
解決方案2
0 2018-01-27 17:42:33
您必須比較所有選擇框值的值以找出男性和女性的人數
堆棧片段
function arrangeSno() { var i = 0; $('#pTable tr').each(function() { $(this).find(".sNo").html(i); i++; }); } $(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); }); }); $(document).on('click', 'button.rButton', function() { $(this).closest('tr').remove(); arrangeSno(); return false; }); var m = 0; var f = 0; $(document).on("click", "#sumGender", function() { $("select").each(function() { if ($(this).val() == "M") { m++; } else { f++; } }); console.log("Male: " + m); console.log("Female: " + f); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>jQuery Add Remove Rows Dynamically in a Html Table Example</h1> <form method="post"> <p>Enter Passenger Details. Press Add Passengers button to add more passengers.</p> <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="button" value="Calculate" id="sumGender"> </form>
如何獲取 jquery 中所有行值的總和
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.