JS如何根据后端返回的ColumnType动态设置表格每列的对齐方式

问题原因 #

你现有代码的问题在于，遍历每一列的配置时，都把页面上所有td元素的对齐规则覆盖更新了一遍，最终所有单元格的对齐方式都会和最后一列的配置保持一致。另外要注意后端返回的字段是ColumnType（首字母大写），你原有代码里写的columnType是小写，要确认字段名匹配避免取值错误。

实现思路 #

HTML表格中同一列的单元格，对应每一行<tr>下索引相同的<td>元素，你可以直接按列索引筛选对应列的所有td，单独设置对齐规则，不需要遍历全量td元素。

修改后代码 #

const tableRows = document.querySelectorAll('tr');
// 遍历列配置，x为列的索引，从0开始计数
for(let x in DataHeader){
    const colType = DataHeader[x].ColumnType;
    // 统一判断对齐方式，简化逻辑
    const align = colType === 'STRING' ? 'left' : 'right';
    // 遍历每一行，取当前列对应的td设置样式
    tableRows.forEach(row => {
        const targetTd = row.querySelectorAll('td')[x];
        // 排除没有td的表头行，如需表头同步对齐可把选择器换成'th,td'
        if(targetTd) targetTd.style.textAlign = align;
    })
}

更优方案 #

你也可以通过生成CSS规则的方式批量设置，不需要遍历DOM元素，性能更好，且后续表格新增行时会自动适配对齐规则：

let styleText = '';
for(let x in DataHeader){
    const colType = DataHeader[x].ColumnType;
    const align = colType === 'STRING' ? 'left' : 'right';
    // CSS的nth-child从1开始计数，所以索引要+1
    styleText += `td:nth-child(${+x + 1}) { text-align: ${align} !important; }`;
}
// 插入样式到页面
const style = document.createElement('style');
style.innerHTML = styleText;
document.head.appendChild(style);

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