DataTables删除按钮失效及首行列显示undefined问题求助

问题1：删除按钮无法正常工作 #

原因 #

• 事件监听中错误引用了不存在的表格ID #table_h，实际表格ID为 #tableh
• 同时使用按钮onclick事件和事件委托，且removePG函数仅更新数据源arrData，未同步更新DataTable实例

修复 #

• 修正表格ID引用错误
• 移除按钮的onclick属性，通过事件委托统一处理删除逻辑，同步更新数据源arrData和DataTable实例

问题2：页面重载后首行第5列显示undefined #

原因 #

初始化添加的首行数据对象缺少note字段，渲染备注列时data.note为undefined

修复 #

在初始的arrData数据中添加note: ""字段

修正后的完整代码 #

JavaScript #

var table = null;
var arrData = [];
var arrDataPG = [];
arrData.push({
    STT: 1,
    id: 1,
    product_type: "",
    condition1: "",
    rebate: 0.0,
    note: "" // 补充缺失的note字段
});
$(document).ready(function () {
    InitTable();
});

function InitTable() {
    if (table !== null && table !== undefined) {
        table.destroy();
    }
    table = $('#tableh').DataTable({
        data: arrData,
        "columns": [
            { "width": "25px" },
            { "width": "300px" },
            { "width": "300px" },
            { "width": "120px" },
            { "width": "200px" },
            { "width": "25px" }
        ],
        columnDefs: [
            {
                title: "STT",
                targets: 0,
                data: null,
                render: function (data, type, row, meta) {
                    return (meta.row + meta.settings._iDisplayStart + 1);
                },
            },
            {
                title: "Loại sản phẩm*",
                targets: 1,
                data: null,
                render: function (data, type, row, meta) {
                    return '<textarea style="width: 300px;" id="product_type' + data.id + '" type="text" onchange="ChangeProductType(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.product_type + '">' + data.product_type + '</textarea>';
                }
            },
            {
                title: "Điều kiện*",
                targets: 2,
                data: null,
                render: function (data, type, row, meta) {
                    return '<textarea style="width: 300px;" id="condition1' + data.id + '" type="text" onchange="ChangeCondition1(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.condition1 + '">' + data.condition1 + '</textarea>';
                }
            },
            {
                title: "Rebate(%)*",
                targets: 3,
                data: null,
                width: "70",
                render: function (data, type, row, meta) {
                    return '<div><input id="rebate' + data.id + '" type="number" style="width: 70px;" onchange="ChangeRebate(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.rebate + '"></div>';
                }
            },
            {
                title: "Ghi chú",
                targets: 4,
                data: null,
                width: "250",
                render: function (data, type, row, meta) {
                    return '<textarea style="width:200px;" id="note' + data.id + '" type="text" onchange="ChangeNote(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.note + '">' + data.note + '</textarea>';
                }
            },
            {
                title: "",
                targets: 5,
                data: null,
                className: "dt-center",
                width: "70",
                render: function (data, type, row, meta) {
                   // 移除onclick，改用data-id存储行ID
                   return '<div class="btn btn-danger removePG" style="cursor: pointer;font-size:25px;" data-id="' + data.id + '"><i class="fa-solid fa-trash"></i></div>'
                }
            },
        ],
    });
    table.columns.adjust().draw();
}

$('#addRow').on('click', function () {
    console.log(arrData.length);
    var ida = 1;
    if (arrData.length > 0) {
        ida = arrData[0].id;
        for (var i = 0; i < arrData.length; i++) {
            if (arrData[i].id > ida) {
                ida = arrData[i].id;
            }
        }
    }
    arrData.push({
        STT: ida + 1,
        id: ida + 1,
        product_type: "",
        condition1: "",
        rebate: 0.0,
        note: ""
    });
    if (table != null) {
        table.clear();
        table.rows.add(arrData).draw();
    }
});

// 修正删除逻辑，同步更新数据源和表格
$('#tableh').on('click','.removePG', function () {
    var rowId = parseInt($(this).data('id'));
    // 从数据源移除对应数据
    arrData = arrData.filter(item => item.id !== rowId);
    // 从表格移除行并重新绘制
    table.row($(this).parents('tr')).remove().draw();
});

// 数据更新函数（补充完整逻辑）
function ChangeProductType(id, element) {
    let item = arrData.find(item => item.id === parseInt(id));
    if (item) item.product_type = element.value;
}
function ChangeCondition1(id, element) {
    let item = arrData.find(item => item.id === parseInt(id));
    if (item) item.condition1 = element.value;
}
function ChangeRebate(id, element) {
    let item = arrData.find(item => item.id === parseInt(id));
    if (item) item.rebate = parseFloat(element.value);
}
function ChangeNote(id, element) {
    let item = arrData.find(item => item.id === parseInt(id));
    if (item) item.note = element.value;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<table id="tableh" class="cell-border hover" style="width:100%"></table>
            
<button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

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