Question

这是一个jQuery“在Html表中动态添加删除行”示例。使用添加乘客按钮将添加一行。如何计算此表中的性别总和。我想计算所有性别输入追加行的总和。我如何计算性别总和？我是新鲜的jQuery ...任何人都可以帮助我PLZ ??

<!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

首先，获取所有性别<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);

Answer 2

您必须比较所有选择框值的值，以找出男性和女性的数量

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 个答案: