如何获得所有输入附加行的性别之和

Question

This is a jQuery "Add Remove Rows Dynamically in a Html Table" example. 这是一个jQuery“在HTML表格中动态添加删除行”的示例。 With the add passenger button a row will be appended. 使用添加乘客按钮，将添加一行。 How do I calculate the sum of genders on this table. 如何计算此表上的性别总和。 I want to calculate sum of all gender input append rows. 我想计算所有性别输入附加行的总和。 How do I calculate sum of gender? 如何计算性别总和？ I am fresh in jQuery ... can anyone help me plz?? 我对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>

Answer 1

First, get all of the gender <select> s: 首先，获取所有性别<select> ：

var $genderSelects = $('select[name="gender"]');

Then you get their values using jQuery's map function, which iterates through the selects and returns a value based on each one (in this case based on their actual value in the DOM): 然后，您可以使用jQuery的map函数获取它们的值，该函数遍历选择并返回基于每个选择的值（在这种情况下，根据其在DOM中的实际值）：

var values = $genderSelects.map(function(i, select) {
    return $(select).val();
});

Finally you sum those values up; 最后，您将这些值相加。 one convenient way to do this is with a reduce statement: 一种方便的方法是使用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);

Answer 2

You have to compare the values of all the select-box values to find out the numbers of male and female 您必须比较所有选择框值的值以找出男性和女性的人数

Stack Snippet 堆栈片段

 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>

如何获得所有输入附加行的性别之和

问题描述

2 个解决方案

解决方案1
0 2018-01-27 06:50:56

解决方案2
0 2018-01-27 17:42:33

如何获得所有输入附加行的性别之和

问题描述

2 个解决方案

解决方案1 0 2018-01-27 06:50:56

解决方案2 0 2018-01-27 17:42:33

解决方案1
0 2018-01-27 06:50:56

解决方案2
0 2018-01-27 17:42:33