在Grid.js中是否可以指定tr元素样式以实现交替行样式效果？

你遇到的样式不生效问题，是因为Grid.js的内联style配置不支持CSS伪类选择器，且默认表格单元格样式优先级可能覆盖行样式，可通过以下两种方案实现需求：

方案一：通过自定义类名配合CSS实现（推荐） #

1. 在Grid.js初始化配置中添加className属性，为表格根节点绑定自定义类名：

columns: ["Name", "Email", "Phone Number"],
data: [
  ["John", "john@example.com", "(353) 01 222 3333"],
  ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
  ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
  ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
  ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
],
className: {
  table: 'custom-grid-table'
}
}).render(document.getElementById("wrapper"));

2. 在你的CSS文件中添加对应样式即可，!important用于覆盖Grid.js默认样式优先级：

.custom-grid-table tr:nth-child(even) {
   background-color: Lightgreen !important;
}
/* 如需统一设置所有行的基础样式也可在此添加 */
.custom-grid-table tr {
   background-color: #fff !important;
}

方案二：通过行样式回调直接在配置中实现（无需额外CSS） #

直接将style.tr设置为回调函数，根据行索引动态返回样式，适配不想额外编写CSS的场景：

columns: ["Name", "Email", "Phone Number"],
data: [
  ["John", "john@example.com", "(353) 01 222 3333"],
  ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
  ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
  ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
  ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
],
style: {
  tr: (row, rowIndex) => {
    return {
      'background-color': rowIndex % 2 === 1 ? 'Lightgreen' : '#ffffff'
    }
  }
}
}).render(document.getElementById("wrapper"));

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