如何单独选中表格每行并为每行添加样式？

嗨，我来帮你搞定这个问题！要单独选中表格的每一行并添加样式，结合你提供的代码，我整理了几个实用的方案，既能直接修改现有逻辑，也能实现交互性的选中效果：

方案1：创建行时直接设置样式 #

你可以在循环生成每行的过程中，直接给行元素添加样式或类名，这样能在初始化时就完成样式设置，也方便后续维护：

function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.border = "1px solid #ccc";
  tbl.style.width = "400px";
  tbl.style.borderCollapse = "collapse"; // 合并边框让表格更美观

  for (var i = 0; i < 5; i++) {
    var tr = tbl.insertRow();
    
    // 给行添加类名，方便后续用CSS统一控制
    tr.classList.add('table-row');

    // 隔行变色效果：偶数行（含表头）设置浅灰背景
    if (i % 2 === 0) {
      tr.style.backgroundColor = '#f5f5f5';
    }

    for (var j = 0; j < 5; j++) {
      var td = tr.insertCell();
      td.style.border = "1px solid #ddd";
      td.style.padding = "10px";
      
      // 填充表头内容并单独设置样式
      if (i === 0) {
        const headers = ['S.No', 'Name', 'Emp.ID', 'Gender', 'Salary'];
        td.appendChild(document.createTextNode(headers[j]));
        tr.style.backgroundColor = '#006699';
        td.style.color = '#ffffff';
      } else {
        // 填充示例数据
        td.appendChild(document.createTextNode(`数据行 ${i}，列 ${j+1}`));
      }
    }
  }

  body.appendChild(tbl);
}
tableCreate();

搭配CSS可以实现 hover 效果：

.table-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.table-row:hover {
  background-color: #e8f4fa;
}

方案2：表格生成后批量处理行（支持点击选中） #

如果需要实现点击行切换选中状态的交互，可以在表格完全创建后，通过选择器选中所有行，再逐个添加事件和样式：

function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.border = "1px solid #ccc";
  tbl.style.width = "400px";
  tbl.style.borderCollapse = "collapse";

  for (var i = 0; i < 5; i++) {
    var tr = tbl.insertRow();
    for (var j = 0; j < 5; j++) {
      var td = tr.insertCell();
      td.style.border = "1px solid #ddd";
      td.style.padding = "10px";
      
      if (i === 0) {
        const headers = ['S.No', 'Name', 'Emp.ID', 'Gender', 'Salary'];
        td.appendChild(document.createTextNode(headers[j]));
      } else {
        td.appendChild(document.createTextNode(`数据行 ${i}，列 ${j+1}`));
      }
    }
  }

  body.appendChild(tbl);

  // 表格生成后，获取所有行并处理
  const allRows = tbl.querySelectorAll('tr');
  allRows.forEach((row, index) => {
    // 表头行单独设置样式
    if (index === 0) {
      row.style.backgroundColor = '#006699';
      row.style.color = '#ffffff';
      return;
    }

    // 给数据行添加点击事件和基础样式
    row.style.cursor = 'pointer';
    row.addEventListener('click', function() {
      // 点击时切换选中类，实现高亮效果
      this.classList.toggle('selected-row');
    });
  });
}
tableCreate();

对应的选中样式CSS：

.selected-row {
  background-color: #cce5ff;
  font-weight: 600;
}

小提示 #

原代码里的if (i == 5 && j == 5) { break; }其实不会生效（因为循环只到i<5），我已经把这部分冗余代码去掉了，让逻辑更清晰。

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