从动态表格提取数据创建自定义表格的技术实现问询

以下是基于你的需求的完整代码实现，分为数据结构化处理、目标表格生成两个核心部分：

1. 重构数据收集逻辑 #

原代码将所有值存入扁平数组，无法关联单元与对应L列数据。我们先将原始表格数据转换为结构化对象数组，便于后续处理：

function getval() {
    // 选择所有单元行（排除表头、倒数第二行、最后一行之外的行）
    const unitRows = $('#DyanmicTable3 tr:not(:first-child):not(:nth-last-child(2)):not(:last-child)');
    // 选择最后一行（对应预期输出中的"unit"行）
    const finalRow = $('#DyanmicTable3 tr:last-child');
    const processedData = [];

    // 处理每个单元行
    unitRows.each(function() {
        const tr = this;
        // 获取单元名称（第一个th元素）
        const unitName = tr.children[0].textContent.trim();
        // 提取L1-L6的数值（对应索引2到7的td元素）
        const lValues = {
            L1: Number(tr.children[2].textContent),
            L2: Number(tr.children[3].textContent),
            L3: Number(tr.children[4].textContent),
            L4: Number(tr.children[5].textContent),
            L5: Number(tr.children[6].textContent),
            L6: Number(tr.children[7].textContent)
        };
        processedData.push({ unit: unitName, lValues });
    });

    // 处理最后一行的"unit"数据
    if (finalRow.length) {
        const tr = finalRow[0];
        const unitName = tr.children[0].textContent.trim();
        const lValues = {
            L1: Number(tr.children[2].textContent),
            L2: Number(tr.children[3].textContent),
            L3: Number(tr.children[4].textContent),
            L4: Number(tr.children[5].textContent),
            L5: Number(tr.children[6].textContent),
            L6: Number(tr.children[7].textContent)
        };
        processedData.push({ unit: unitName, lValues });
    }

    // 生成目标表格数据行
    const tableRows = [];
    processedData.forEach(item => {
        // 遍历L1-L6，仅保留非零值
        for (let i = 1; i <= 6; i++) {
            const lKey = `L${i}`;
            const value = item.lValues[lKey];
            if (value !== 0) {
                tableRows.push({
                    unit: item.unit,
                    question: `${value}(${lKey})`
                });
            }
        }
    });

    // 渲染自定义表格
    renderCustomTable(tableRows);
}

2. 动态生成自定义表格 #

编写渲染函数，根据处理好的数据生成符合预期样式的表格：

function renderCustomTable(rows) {
    // 创建表格元素并添加样式类
    const $table = $('<table>').addClass('custom-result-table');
    
    // 添加表头行
    const $headerRow = $('<tr>');
    $headerRow.append($('<th>').text('unit'));
    $headerRow.append($('<th>').text('Question'));
    $table.append($headerRow);

    // 添加数据行
    rows.forEach(row => {
        const $dataRow = $('<tr>');
        $dataRow.append($('<td>').text(row.unit));
        $dataRow.append($('<td>').text(row.question));
        $table.append($dataRow);
    });

    // 将表格插入到页面指定容器（请替换为你的实际容器选择器）
    $('#resultContainer').empty().append($table);
}

3. 补充说明 #

• 样式调整：可以给.custom-result-table添加CSS样式，让表格更美观：

.custom-result-table {
    border-collapse: collapse;
    width: 50%;
    margin-top: 20px;
}
.custom-result-table th, .custom-result-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.custom-result-table th {
    background-color: #f2f2f2;
}

• 零值处理：代码中默认跳过零值，若需要保留零值，可删除if (value !== 0)判断条件。
• 容器选择器：确保页面存在#resultContainer元素（或替换为你想要插入表格的DOM元素选择器）。

内容的提问来源于stack exchange，提问作者Vikash kumar sen