CSV转HTML表格后JavaScript排序异常问题求助

核心原因 #

• 百分比列（及部分其他列）在HTML中是以字符串形式存在的（比如24%），JavaScript排序时默认按字符串的字符编码顺序比较，而非数值大小。例如"24%"和"9%"，字符串比较时"2"的编码小于"9"，所以"24%"会排在"9%"之后，不符合数值排序预期。
• 其他非文本列如果在转换时没有保留数值类型信息，也会被JS当作字符串处理，导致排序逻辑错误。

修复步骤 #

1. 修改Python转换脚本，为数值列添加数据属性 #

在生成HTML表格时，给数值类单元格（比如百分比、计数列）添加data-value属性，存储纯数值（去掉%符号，转成数字）：

import pandas as pd
import os

def csv_to_html_with_data_attr(csv_path, html_path):
    df = pd.read_csv(csv_path)
    # 处理各列，生成纯数值辅助列
    for col in df.columns:
        # 识别并处理百分比列
        if df[col].dtype == object and any('%' in str(x) for x in df[col].dropna()):
            df[f'{col}_num'] = df[col].str.replace('%', '').astype(float)
        # 处理其他数值类型列
        elif pd.api.types.is_numeric_dtype(df[col]):
            df[f'{col}_num'] = df[col]
    
    # 生成带data-value属性的HTML单元格
    html = df.to_html(escape=False, formatters={
        col: lambda x, c=col: f'<td data-value="{df.loc[df.index.get_loc(x.name), f"{c}_num"]}">{x}</td>' 
        if f'{col}_num' in df.columns else f'<td>{x}</td>'
        for col in df.columns
    })
    
    # 整合样式、脚本与表格内容
    with open('styles.css', 'r') as f:
        css = f.read()
    with open('sort.js', 'r') as f:
        js = f.read()
    
    full_html = f'''
    <!DOCTYPE html>
    <html>
    <head>
        <style>{css}</style>
    </head>
    <body>
        {html}
        <script>{js}</script>
    </body>
    </html>
    '''
    with open(html_path, 'w') as f:
        f.write(full_html)

# 批量转换逻辑
input_dir = './csv_files'
output_dir = './html_files'
os.makedirs(output_dir, exist_ok=True)

for filename in os.listdir(input_dir):
    if filename.endswith('.csv'):
        csv_path = os.path.join(input_dir, filename)
        html_path = os.path.join(output_dir, filename.replace('.csv', '.html'))
        csv_to_html_with_data_attr(csv_path, html_path)

2. 修改JavaScript排序逻辑，使用data-value进行数值比较 #

替换原JS排序代码，优先读取单元格的data-value属性进行排序：

document.querySelectorAll('th').forEach(th => {
    th.addEventListener('click', () => {
        const table = th.closest('table');
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        const colIndex = Array.from(th.parentElement.children).indexOf(th);
        const isAscending = th.classList.contains('asc');
        
        rows.sort((a, b) => {
            const cellA = a.querySelectorAll('td')[colIndex];
            const cellB = b.querySelectorAll('td')[colIndex];
            let valA = cellA.getAttribute('data-value');
            let valB = cellB.getAttribute('data-value');
            
            // 优先用data-value做数值比较
            if (valA !== null && valB !== null) {
                valA = parseFloat(valA);
                valB = parseFloat(valB);
                return isAscending ? valA - valB : valB - valA;
            }
            // 无data-value则按文本排序
            else {
                const textA = cellA.textContent.trim();
                const textB = cellB.textContent.trim();
                return isAscending ? textA.localeCompare(textB) : textB.localeCompare(textA);
            }
        });
        
        // 更新表格行顺序
        rows.forEach(row => tbody.appendChild(row));
        // 更新表头排序状态
        document.querySelectorAll('th').forEach(t => t.classList.remove('asc', 'desc'));
        th.classList.add(isAscending ? 'desc' : 'asc');
    });
});

验证效果 #

重新生成HTML文件后，点击表头时：

• 百分比列会按照实际数值大小排序，24%会排在9%之前
• 其他数值列也会按数值逻辑排序，文本列保持原有字符串排序逻辑

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