基于JQuery Ajax实现三表选行后加载关联DataTable的问题求助

1. 调整复选框表（Form2、Form3）的事件处理逻辑 #

针对带复选框的表格，需要将行选中状态与复选框状态联动，同时保证每个表格仅能选中一行：

• 区分不同表格的事件绑定，避免全局绑定所有tr引发冲突
• 点击行时同步切换复选框状态，自动取消同表其他行的选中状态

2. 确保Ajax请求使用Form1的VoyageKey #

原代码中voyagekey变量未正确从Form1选中行提取，需明确从目标行获取该字段：

• 定位Form1的选中行，提取对应列的VoyageKey值
• 将该值作为Ajax请求的参数传递，保证数据关联正确性

3. 解决点击表格后隐藏的问题 #

表格隐藏通常由事件冒泡或CSS样式冲突导致，可通过以下方式修复：

• 阻止事件冒泡，避免触发父元素的隐藏逻辑
• 执行DataTable的draw()方法后强制显示表格
• 检查selected类的CSS，避免设置display: none属性

修改后的完整代码 #

// 为三个表格单独绑定事件，避免全局tr冲突
$('body').on('click', '#Form1 tr, #Form2 tr, #Form3 tr', function(e) {
    // 阻止事件冒泡，防止触发父元素隐藏逻辑
    e.stopPropagation();

    let $row = $(this);
    let $table = $row.closest('table');
    let isCheckboxTable = $table.is('#Form2, #Form3');

    // 保证当前表格仅一行选中
    $table.find('.selected').removeClass('selected');
    $row.addClass('selected');

    // 复选框表格同步复选框状态
    if (isCheckboxTable) {
        let $checkbox = $row.find('input[type="checkbox"]');
        $table.find('input[type="checkbox"]').prop('checked', false);
        $checkbox.prop('checked', true);
    }

    // 处理Form1的VesselName和VoyageKey赋值
    if ($table.is('#Form1')) {
        let vesselName = $row.find('td:eq(0)').text();
        let voyagekey = $row.find('td:eq(2)').text(); // 请根据实际列位置调整索引
        $('#chooseVessel').val(vesselName);
        $('#chooseVoyage').val(voyagekey);
        console.log('vesselName:', vesselName);
        console.log('voyagekey:', voyagekey);
    }

    // 检查三个表格是否各选中一行
    let form1Selected = $('#Form1 .selected').length === 1;
    let form2Selected = $('#Form2 .selected').length === 1;
    let form3Selected = $('#Form3 .selected').length === 1;

    if (form1Selected && form2Selected && form3Selected) {
        // 获取Form1选中行的VoyageKey
        let voyagekey = $('#Form1 .selected').find('td:eq(2)').text(); // 请根据实际列位置调整索引

        // 发起Ajax请求加载关联数据
        $.ajax({
            type: "POST",
            url: '/Tally/Tally/get',
            data: { voyagekey: voyagekey },
            success: function(result) {
                // 更新ContentTable并确保显示
                table.clear().rows.add(result.data).draw();
                $('#ContentTable').show(); // 强制显示表格，解决隐藏问题
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }
});

额外注意事项 #

• 确保三个表格分别设置唯一ID：#Form1、#Form2、#Form3，若实际ID不同请对应修改
• 调整td:eq(2)的索引值，使其匹配VoyageKey所在的实际列位置
• 检查selected类的CSS样式，建议仅设置背景色等标识样式，不要添加display: none
• 确认table变量是ContentTable的DataTable实例，确保已完成初始化

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