javascript - 如何获取表行中输入的值并根据名称将它们推送到数组中？

Question

我正在尝试根据表中的行数推送数组中的输入值。如果有两行，那么就会有两行数组。下面是工作代码。我是一个

$(document).on('focus',".datepicker", function(){
    $(this).daterangepicker();
});
$(document).ready(function () {
    // $('.datepicker').daterangepicker();

    var counter = 1;

    $("#addrow").on("click", function () {
        
        var newRow = $("<tr>");
        var cols = "";
        // $('input[name="event_date['+counter+']"]').daterangepicker();

        cols += '<td><input type="text" class="form-control" name="round" /></td>';
        cols += '<td><input type="text" name="event_date" class="form-control datepicker" required></td>';
        cols += '<td><select class="form-control show-tick" name="judginground"><option value="BYENTRYTHENCATEGORY" selected="selected">Those specifically assigned to them. If none, those in assigned categories</option><option value="BYCATEGORY">Only those in assigned categories</option><option value="BYENTRY">Only those specifically assigned to them</option><option value="BYENTRYORCATEGORY">Those specifically assigned to them or in assigned categories</option><option value="ANY">All</option></select></td>';
        cols += '<td><input type="checkbox" class="filled-in chk-col-grey" name="is_final"><label for="md_checkbox_38"></label></td>';
        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';

        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
        
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

$("#get_all_data").on('click',function(){

     var table = $('#round_form #myTable');
    var data = [];

    table.find('tbody tr').each(function (i, el) {
        // if( i != 0){
      var $tds = $(this).find('td');
      var row = [];
      $tds.each(function (i, el){
          var selected_val = $("input[name=judginground]").val();
        // row.push($(this).text());
        if($(this).text() != 'undefined'){
            row.push($(this).find("input").val());
            row.concat($(this).text());
        }
        
        // row.concat("mohammed");

        // row.concat("#");judginground
        // row.concat($("input[name=judginground]").val());
        
      });
      data.push(row);
    // }
        
  });
  console.log(data)
//   return data;
    // get all the inputs into an array.
    



})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <form id="round_form" >
        <table class="table table-bordered table order-list"  id="myTable" >
            <thead>
                <tr>
                    <th>Round#</th>
                    <th>Start Time - End Time</th>
                    <th>all</th>
                    <th>Enable Finalizing</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-sm-1">
                        <input type="text" name="round" class="form-control" />
                    </td>
                    <td class="col-sm-3">
                        <input type="text" name="event_date" class="form-control datepicker" required=''>
                    </td>
                    
                    <td class="col-sm-6">

                        <select class="form-control show-tick" name="judginground" >
                        <option value="BYENTRYTHENCATEGORY" selected="selected">Those specifically assigned to them. If none, those in assigned categories</option>
                            <option value="BYCATEGORY">Only those in assigned categories</option>
                            <option value="BYENTRY">Only those specifically assigned to them</option>
                            <option value="BYENTRYORCATEGORY">Those specifically assigned to them or in assigned categories</option>
                            <option value="ANY">All</option>
                        </select>
            
                    
                    </td>
                    <td class="col-sm-1">
                        <input type="checkbox" class="filled-in chk-col-grey" checked="" name="is_final">
                        <label for="md_checkbox_38"></label>
                    </td>
                    <td class="col-sm-1">
                        <a class="deleteRow"></a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" style="text-align: left;">
                        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add New Round" />
                    </td>
                </tr>
                <tr>
                </tr>
            </tfoot>
        </table>
        <input type="button" class="btn btn-lg btn-block " id="get_all_data" value="Get All Round data" />
    </form>

距离获取值还有一点点距离，但选择功能给我带来了问题。

我能够获取输入值，但选择值给我未定义。请帮帮我。

Answer 1

我自己解决了这个问题。只需添加这行代码 row.push({name_vl:$(this).find("input, select").val()});而不是这两行 row.push($(this).find("input").val());
row.concat($(this).text());