如何在Chrome扩展的DataTable中维持最少3行数据

针对你的DataTable需求，核心要解决三个问题：移除空行、确保新增数据后至少3行、空行添加到正确位置。以下是具体修正步骤：

1. 新增数据前先清理空行 #

点击添加按钮时，先删除表格里所有标记为empty-row的空行，避免旧空行残留。

2. 按需补充空行数量 #

新增有效数据后，统计当前非空行的数量，计算需要补充多少空行才能凑够3行，而非固定添加2行。

3. 确保空行添加到表格末尾 #

利用DataTable原生API添加行，默认会把行追加到数据集末尾，配合draw(false)保持表格状态。

修正后的完整代码 #

(function () {
    console.log($('#lvIdleTime'));
    lvIdleTime = $('#lvIdleTime').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
        columns: [
            {
                "data": null, render: function (data, type, row) {
                    if (data.FromTime === null) {
                        return '';
                    }
                    return getHMSFromMili(data.FromTime);
                }
            },
            {
                "data": null, render: function (data, type, row) {
                    if (data.ToTime === null) {
                        return '';
                    }
                    return getHMSFromMili(data.ToTime);
                }
            },
            { data: 'Description' },
            { data: 'ActivityName' },
            { data: 'FromTime' },
            { data: 'ToTime' }
        ],
        setRowProps: () => ({
            onDoubleClick: (row, dataIndex) => {
                alert("double click!");
            }
        }),
        "columnDefs": [
            { "targets": [4, 5], "visible": false, "searchable": false }
        ],
    });

    // 初始化表格，确保至少3行空行
    initializeEmptyRows();

    $("#BtnAdd").click(function () {
        if (SplitIdleTimeData()) {
            $('#divlvIdleTime').show();
            $('#resetDiv').show();
        }
    });

    // 初始化空行函数
    function initializeEmptyRows() {
        const currentRowCount = lvIdleTime.data().count();
        if (currentRowCount < 3) {
            addEmptyRows(3 - currentRowCount);
        }
    }

    // rest of the code
})();

function SplitIdleTimeData() {
    FromTimePicker = document.getElementById('txtFrom');
    ToTimePicker = document.getElementById('txtTo');
    // some more codes
    let data = {
        FromTime: GetDateTime(FromTimePicker.value, idledata.FromTime),
        ToTime: GetDateTime(ToTimePicker.value, idledata.ToTime),
        Description: $("#ActivityDescription").val(),
        ActivityName: $("#selActivity option:selected").text(),
        ActivityId: $("#selActivity option:selected").val()
    };

    // 检查时间是否重复（改用DataTable API遍历，更可靠）
    let timeExists = false;
    lvIdleTime.rows().every(function () {
        const rowData = this.data();
        if (rowData.FromTime === data.FromTime) {
            timeExists = true;
            return false;
        }
    });

    if (timeExists) {
        const message = "Selected From Time and To Time is already exists in the list.";
        console.log("showing message: " + message);
        $("#alert-body").html('<p>' + message + '</p>');
        Modalalert.show();
        return false;
    }

    console.log("the data is %o", data);
    console.log("the data is %s", JSON.stringify(data));

    // 先移除所有空行
    lvIdleTime.rows('.empty-row').remove().draw(false);

    // 添加新的有效数据行
    lvIdleTime.row.add(data).draw(false);

    // 计算需要补充的空行数量，确保总行数至少3
    const currentValidRows = lvIdleTime.data().count();
    if (currentValidRows < 3) {
        addEmptyRows(3 - currentValidRows);
    }

    SetNextTimeValueForDateControls();
    if (new Date(GetDateTimeWithoutSeconds(FromTimePicker.value)).getTime() >= new Date(GetDateTimeWithoutSeconds(ToTimePicker.value)).getTime()) {
        let compareDurationInSeconds = 59;
        if (lvIdleTime.rows().data().length > 0) {
            var dataFirst = lvIdleTime.rows(0).data()[0];
            FromTimePicker.value = new Date(idledata.FromTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }).substring(0, 8);
            ToTimePicker.value = new Date(dataFirst.ToTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }).substring(0, 8);
        }
    }
    $("#selActivity").prop('selectedIndex', 0);
    $("#ActivityDescription").val("");
    return true;
}

function addEmptyRows(count) {
    for (let i = 0; i < count; i++) {
        const emptyData = {
            Description: '',
            ActivityName: '',
            FromTime: null,
            ToTime: null
        };
        const newRow = lvIdleTime.row.add(emptyData).node();
        $(newRow).addClass('empty-row');
    }
    lvIdleTime.draw(false);
}

关键改动说明 #

• 新增initializeEmptyRows()函数，确保页面加载时表格至少有3行空行
• 在SplitIdleTimeData()中，先清空所有空行再添加新数据，避免空行与有效行混杂
• 修正时间重复检查逻辑，使用DataTable原生API遍历行数据，比直接操作DOM更稳定
• 空行数量计算改为3 - 当前有效行数，逻辑更精准
• 所有行操作后调用draw(false)，保证行添加到正确位置且不打乱表格状态

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