如何单独选择每一行，我需要为每一行添加一些样式

Question

function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.border = "1px solid #ccc";
  tbl.style.width = "400px";
  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";
      if (i == 5 && j == 5) {
        break;
      } else {

        td.style.padding = "10px";
        if (i == 0 && j == 0) {
          td.appendChild(document.createTextNode('S.No'));
        }
        if (i == 0 && j == 1) {
          td.appendChild(document.createTextNode('Name'));
        }
        if (i == 0 && j == 2) {
          td.appendChild(document.createTextNode('Emp.ID'));
        }
        if (i == 0 && j == 3) {
          td.appendChild(document.createTextNode('Gender'));
        }
        if (i == 0 && j == 4) {
          td.appendChild(document.createTextNode('Salary'));
        }
      }
    }
  }
  //for(var){}
  tr.style.background = '#006699';
  body.appendChild(tbl);
}

tableCreate();

Answer 1

您可以在添加行的同时添加样式：

var tr = tbl.insertRow();
tr.style. //whatever you want here

或者你可以稍后循环遍历

for (var i = 0, row; row = tbl.rows[i]; i++) {
    row.style. //whatever you want here
}

Answer 2

我不知道你想要什么样的结果......

...但是这里是每个tr元素的随机颜色代码段：

// ADDED function to pick random rgb values
function getRandomRGB() {
  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);
  return "rgb(" + r + "," + g + "," + b + ")";
}


function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.border = "1px solid #ccc";
  tbl.style.width = "400px";
  for (var i = 0; i < 5; i++) {
    var tr = tbl.insertRow();
    tr.style.background = getRandomRGB(); // ADDED here
    
    for (var j = 0; j < 5; j++) {
      var td = tr.insertCell();
      td.style.border = "1px solid #ddd";
      if (i == 5 && j == 5) {
        break;
      } else {
        td.style.padding = "10px";
        if (i == 0) { /* OPTIMIZED code here */
          if (j == 0) td.appendChild(document.createTextNode('S.No'));
          if (j == 1) td.appendChild(document.createTextNode('Name'));
          if (j == 2) td.appendChild(document.createTextNode('Emp.ID'));
          if (j == 3) td.appendChild(document.createTextNode('Gender'));
          if (j == 4) td.appendChild(document.createTextNode('Salary'));
        }
      }
    }
  }
  // tr.style.background = '#006699'; // REMOVED here, it isn't the good place !
  body.appendChild(tbl);
}

tableCreate();

⋅ ⋅ ⋅

你也可以使用nth-of-type()选择器在CSS中做些好事：
（这里，它是固定的颜色值）

function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.border = "1px solid #ccc";
  tbl.style.width = "400px";
  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";
      if (i == 5 && j == 5) {
        break;
      } else {
        td.style.padding = "10px";
        if (i == 0) { /* OPTIMIZED code here */
          if (j == 0) td.appendChild(document.createTextNode('S.No'));
          if (j == 1) td.appendChild(document.createTextNode('Name'));
          if (j == 2) td.appendChild(document.createTextNode('Emp.ID'));
          if (j == 3) td.appendChild(document.createTextNode('Gender'));
          if (j == 4) td.appendChild(document.createTextNode('Salary'));
        }
      }
    }
  }
  // tr.style.background = '#006699'; // Here isn't the good place !
  body.appendChild(tbl);
}

tableCreate();

tr:nth-of-type(3n+1) td {
  background: #ccc;
}

tr:nth-of-type(3n+2) td {
  background: #ddd;
}

tr:nth-of-type(3n+3) td {
  background: #eee;
}

tr:first-of-type td {
  background: #aaa;
}

请注意，您可能希望将首个td元素更改为th元素，因为您似乎将它们用作标题。

希望它有所帮助。