使用csv-to-html-table实现单元格值关联背景色的技术求助

你当前的format_link函数仅用于生成链接，无法实现背景色设置需求。下面提供两种可行方案：

方案1：通过自定义格式化函数返回带样式的内容 #

修改自定义函数，将单元格值包裹在带背景色样式的元素中，直接替换原有函数即可：

function formatCellWithBackgroundColor(value) {
  // 根据数值判断背景色，可自行调整条件和颜色值
  const bgColor = value > 20 ? '#d4edda' : '#f8d7da';
  // 用span包裹并设置样式，确保颜色覆盖整个单元格
  return `<span style="background-color: ${bgColor}; padding: 8px; display: block;">${value}</span>`;
}

CsvToHtmlTable.init({
    csv_path: "./Data/summer.csv",
    element: "table-container",
    allow_download: true,
    csv_options: {
        separator: ",",
        delimiter: '"'
    },
    datatables_options: {
        paging: true,
        processing: true
    },
    custom_formatting: [
        [5, formatCellWithBackgroundColor] // 第5列（索引从0开始）应用该函数
    ]
});

如果需要同时保留链接功能，可把逻辑合并：

function formatCellWithLinkAndColor(value) {
  const bgColor = value > 20 ? '#d4edda' : '#f8d7da';
  if (value > 20) {
    return `<a href="${value}" target="_blank" style="background-color: ${bgColor}; padding: 8px; display: block;">${value}</a>`;
  } else {
    return `<span style="background-color: ${bgColor}; padding: 8px; display: block;">${value}</span>`;
  }
}

方案2：利用DataTables的createdCell回调直接修改单元格样式 #

该工具基于DataTables，可通过配置datatables_options直接操作单元格元素，这种方式无需包裹内容，效果更原生：

CsvToHtmlTable.init({
    csv_path: "./Data/summer.csv",
    element: "table-container",
    allow_download: true,
    csv_options: {
        separator: ",",
        delimiter: '"'
    },
    datatables_options: {
        paging: true,
        processing: true,
        createdCell: function(td, cellData, rowData, rowIndex, colIndex) {
            // 针对第5列（索引从0开始）设置背景色
            if (colIndex === 5) {
                td.style.backgroundColor = cellData > 20 ? '#d4edda' : '#f8d7da';
            }
        }
    },
    custom_formatting: [
        [5, format_link] // 保留原有链接逻辑，背景色由createdCell处理
    ]
});

内容的提问来源于stack exchange，提问作者raghvendra pratap Singh