使用JQuery遍历DataTable代码失效，请求技术帮助

你的代码存在多个语法和逻辑问题，下面逐一排查并给出修复后的完整实现：

核心问题梳理 #

1. 按钮点击绑定错误：onclick="loopGrid" 缺少函数调用括号，无法触发函数执行；且submit类型按钮会触发表单默认提交，导致页面刷新中断逻辑。
2. 函数定义语法错误：function loopGrid { 缺少参数括号，不符合JS语法规范。
3. 变量未初始化：直接使用tr变量但从未从表格中获取行集合，循环无法执行。
4. 复选框逻辑失效：
   • 所有复选框使用相同IDSelectedLicenses，ID必须唯一，应改为class标识。
   • 未获取当前行的复选框元素，也未判断选中状态。
5. 参数获取缺失：未实现行ID与输入框值的收集逻辑。

修复后的完整代码 #

HTML部分

<form method="post" style="margin-bottom: 41px">
    <!-- 改为button类型避免默认表单提交，或保留submit并在函数中阻止默认行为 -->
    <input class="btn btn-primary text-warning" value="Extend Selected Licenses" type="button" onclick="loopGrid()" id="btnExtendSelectedLicense">
    <input class="form-control" id="NumberOfDaysExtended" type="number" style="height: 30px; width: 100px; margin-left: 216px; margin-top: -41px" min="1">
</form>

<!-- 表格行示例：tr通过data-id存储行ID，复选框改为class -->
<tr data-id="123">
    <td> 
        <input class="form-check-input bg-light SelectedLicenses" type="checkbox">
    </td>
    <!-- 其他列 -->
</tr>

JavaScript部分

function loopGrid() {
    // 1. 获取并验证输入框的延长天数
    var daysInput = document.getElementById("NumberOfDaysExtended");
    var days = daysInput.value.trim();
    if (!days || isNaN(days) || parseInt(days) <= 0) {
        alert("请输入有效的正整数天数");
        daysInput.focus();
        return;
    }

    // 2. 获取表格及所有行（跳过表头行，i从1开始）
    var table = document.getElementById("CustomerLicensingTable");
    var rows = table.getElementsByTagName("tr");
    var selectedIds = [];

    // 3. 遍历行查找选中的复选框
    for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var checkbox = row.querySelector(".SelectedLicenses");
        // 检查复选框是否存在且被选中
        if (checkbox && checkbox.checked) {
            // 获取行ID（从tr的data-id属性读取）
            var rowId = row.getAttribute("data-id");
            if (rowId) {
                selectedIds.push(rowId);
                console.log("找到选中许可证，ID：" + rowId);
            }
        }
    }

    // 4. 验证是否选中行
    if (selectedIds.length === 0) {
        alert("请至少选择一个许可证");
        return;
    }

    // 5. 传递参数给控制器（示例用AJAX，也可改用表单提交）
    $.ajax({
        url: "/License/ExtendSelected", // 替换为你的控制器接口路径
        type: "POST",
        data: {
            licenseIds: selectedIds,
            extendDays: parseInt(days)
        },
        success: function(res) {
            alert("许可证延长成功");
            // 可在此处刷新表格或执行其他后续操作
        },
        error: function() {
            alert("操作失败，请重试");
        }
    });
}

额外说明 #

• 确保表格行的data-id属性正确存储每行的许可证ID，若你的ID存储在隐藏列，可改为row.querySelector(".license-id").textContent获取。
• 控制器需对应接收licenseIds（数组类型）和extendDays参数，根据后端框架（如ASP.NET MVC、Spring Boot）调整参数绑定方式。
• 若偏好表单提交而非AJAX，可在函数中动态创建隐藏域，将选中ID存入后手动提交表单。

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