JQuery动态追加含rowspan表格后DataTable初始化报错咨询

我是jQuery新手，页面初始化了#approval_eseverance表格的DataTable；点击按钮通过AJAX获取数据后，清空#approval_form并动态追加带有rowspan属性表头的#create-pkwt表格，初始化该表格的DataTable时出现报错，移除rowspan后DataTable可正常工作，想咨询如何在保留rowspan表头的前提下解决报错问题。

相关代码 #

HTML代码 #

<div class="card-body pt-5">
    <form action="" method="POST" id="approval_form" enctype="multipart/form-data">
        @method('POST')
        <div class="table-responsive">
            <table id="approval_eseverance" class="table table-hover table-row-bordered table-striped border gy-7 gs-7">
                <thead>
                    <tr class="fw-semibold fs-6 text-gray-800 border-bottom-2 border-gray-200">
                        <th class="min-w-100px" >a</th>
                        <th class="min-w-150px">b</th>
                        <th class="min-w-200px">c</th>
                        <th class="min-w-150px ">d</th>
                        <th class=" min-w-150px">e</th>
                        <th>f</th>
                    </tr>
                </thead>
                <tbody>(the tr td in tbody)</tbody>
            </table>
        </div>
    </form>

JS代码 #

$(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    new DataTable('#approval_eseverance', {
        "dom": '<"top"lf>rt<"bottom"ip>',
        fixedColumns: {
            left: 3,
        },
        scrollX: true,
        layout: {
            bottomEnd: {
                paging: {
                    boundaryNumbers: false
                }
            }
        }
    });
    $(document).on('click', '.approval_detail', function (e) {
        e.preventDefault();
        var request_id = $(this).data('request-id');
        $.ajax({
            url: "{{ route('detail') }}",
            type: 'POST',
            data: {
                request_id: request_id,
            },
            success: function (res) {
                $('#approval_form').empty();
                var table = $('#approval_form');
                var table_detail = "";
                table_detail += '<div id="create-form-pkwt" class="create-form table-responsive" autocomplete="off">';
                table_detail += '<table class="table tb_create table-bordered" id="create-pkwt">';
                table_detail += '<thead>';
                table_detail += '<tr class="fw-bold fs-6 text-gray-800"><th style="white-space:nowrap" class="text-center" rowspan="3">No</th>';
                table_detail += '<th style="white-space:nowrap" class="text-center" rowspan="3">Employee Number</th>';
                table_detail += '<th style="white-space:nowrap" class="text-center" rowspan="3">Name</th>';
                table_detail += '</tr>';
                table_detail += '</thead>';
                table_detail += ' <tbody>';
                for (var i = 0; i < res.length; i++) {
                    table_detail += '<tr><td class="text-center" style="white-space:nowrap">'+res[i].sub+'</td>';
                    table_detail += '<td class="text-center" style="white-space:nowrap"><input type="hidden" id="pernr_create-pkwt' +
                    res[i].sub + '" name="pernr[]" value="' + res[i].number+
                    '">' + res[i].number+ '</td>';
                    table_detail += '<td class="text-center headcol3" style="white-space:nowrap"><input type="hidden" id="ename_create-pkwt' +
                    res[i].sub + '" name="ename[' + res[i].number+
                    ']" value="' + res[i].name+ '">' + res[i].ename + '</td></tr>';
                }
                table_detail += '</tbody>';
                table_detail += '</table></div>';
                table.append(table_detail);
                $("#create-pkwt").DataTable({
                    scrollY:        "300px",
                    scrollX:        true,
                    scrollCollapse: true,
                    fixedColumns:   {
                        left: 2
                    }
                });
            }
        });
    });
});

报错信息 #

报错提示为：Uncaught TypeError: Cannot read properties of undefined (reading 'style')，错误出现在DataTable的fixedColumns相关逻辑中。

期望样式 #

表头中No、Employee Number、Name三个表头单元格跨3行显示，表格内容列与表头正确对齐。

DataTable的fixedColumns插件对含rowspan的复杂表头兼容性需特殊处理，以下是可行解决方法：

方法1：补充表头空行匹配rowspan行数 #

你设置了rowspan="3"但<thead>中只有1行表头，导致fixedColumns计算表头行数出错。需补充空表头行填满rowspan的行数：
修改动态生成表头的代码：

table_detail += '<thead>';
table_detail += '<tr class="fw-bold fs-6 text-gray-800"><th style="white-space:nowrap" class="text-center" rowspan="3">No</th>';
table_detail += '<th style="white-space:nowrap" class="text-center" rowspan="3">Employee Number</th>';
table_detail += '<th style="white-space:nowrap" class="text-center" rowspan="3">Name</th>';
table_detail += '</tr>';
// 补充2个空行，匹配rowspan=3的总行数
table_detail += '<tr></tr>';
table_detail += '<tr></tr>';
table_detail += '</thead>';

这样表头总行数与rowspan数值一致，fixedColumns能正确识别表头结构，避免未定义属性读取错误。

方法2：禁用fixedColumns表头固定（按需选择） #

如果不需要固定左侧列的表头，可直接移除fixedColumns配置：

$("#create-pkwt").DataTable({
    scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true
});

该方法简单直接，但会丢失左侧列固定的功能。

方法3：手动指定列配置辅助识别 #

通过columns选项明确指定每列配置，帮助DataTable正确对应表头与内容：

$("#create-pkwt").DataTable({
    scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,
    fixedColumns:   {
        left: 2
    },
    columns: [
        { title: "No" },
        { title: "Employee Number" },
        { title: "Name" }
    ]
});

结合方法1补充空表头行，能更好兼容复杂表头结构。

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