如何按名称获取表格行输入值并存入数组？解决select值undefined问题

我看你已经快完成表格数据的收集了，问题出在没有正确定位到当前行的Select元素——你之前的代码是全局查找input[name=judginground]，这会导致要么拿到第一行的select值，要么因为选择器不匹配直接返回undefined。咱们来修正这个逻辑：

核心修改思路 #

放弃遍历每个<td>的模糊逻辑，直接通过控件的name属性在当前行内精准查找：

• 对input（包括checkbox）分别处理值和选中状态
• 对select直接获取其选中的value值

修改后的get_all_data函数 #

$("#get_all_data").on('click',function(){
    var table = $('#round_form #myTable');
    var data = [];
    table.find('tbody tr').each(function (trIndex, trEl) {
        var $currentRow = $(trEl);
        // 用对象存储每行数据，结构更清晰
        var rowData = {
            round: $currentRow.find('input[name="round"]').val(),
            event_date: $currentRow.find('input[name="event_date"]').val(),
            judginground: $currentRow.find('select[name="judginground"]').val(),
            is_final: $currentRow.find('input[name="is_final"]').is(':checked')
        };
        data.push(rowData);
    });
    console.log(data);
    // 这里可以将data用于提交表单等后续操作
})

为什么这样改更靠谱？ #

1. 精准定位：所有控件查找都限定在当前行($currentRow)内，不会跨行获取错误值
2. 结构清晰：用对象存储每行数据，比数组更易读，后续使用也更方便
3. 适配特殊控件：针对checkbox单独用is(':checked')获取布尔值，符合实际业务需求

整合修改后的完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

<script>
$(document).on('focus',".datepicker", function(){ $(this).daterangepicker(); });
$(document).ready(function () {
    var counter = 1;
    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";
        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 (trIndex, trEl) {
        var $currentRow = $(trEl);
        var rowData = {
            round: $currentRow.find('input[name="round"]').val(),
            event_date: $currentRow.find('input[name="event_date"]').val(),
            judginground: $currentRow.find('select[name="judginground"]').val(),
            is_final: $currentRow.find('input[name="is_final"]').is(':checked')
        };
        data.push(rowData);
    });
    console.log(data);
})
</script>

现在点击"Get All Round data"按钮，就能在控制台看到包含每行所有控件值的数组了，select的value也能正确获取到～

内容的提问来源于stack exchange，提问作者Mohammed Sabir