javascript - 条纹表 JavaScript

Question

我正在尝试制作一个表格，该表格将为表格的奇数行和偶数行显示颜色，但不确定我哪里出错了

HTML:

<table id="tableStyles" border="1">
  <th>Heading 1</th>
  <th>Heading 2</th>
  <th>Heading 3</th>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
  <tr>
    <td>Even</td>
    <td>Even</td>
    <td>Even</td>
  </tr>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
</table>

JS:

var isEven = function(someNumber) {
  return (someNumber%2 == 0) ? true : false;
};
if isEven = true {
  var styletab = document.getElementsByTagName("tableStyles");
  var cells = table.getElementsByTagName("td"); 
  for (var i = 0; i < styletab.length; i++) {
    styletab[i].style.fontSize = "12px";
    styletab[i].style.color = "blue";
  }

} else {
  var styletab = document.getElementsByTagName("tableStyles");
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < styletab.length; i++) {
  styletab[i].style.fontSize = "12px";
  styletab[i].style.color = "red";
  }
}

Answer 1

我建议:

Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tr'), function (tr) {
    tr.classList.add((tr.rowIndex%2 === 0 ? 'even' : 'odd'));
});

假设您在 CSS 中为 tr.odd 和 tr.even 设置了样式；另外，您使用的是相对最新的浏览器； Internet Explorer 8+ for document.querySelectorAll()，Internet Explorer 9+ for Array.prototype.forEach()。

Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tr'), function(tr) {
  // rowIndex is the index of the current <tr> in the table element:
  tr.classList.add((tr.rowIndex % 2 === 0 ? 'even' : 'odd'));
});

.even {
  color: red;
}
.odd {
  color: blue;
}

<table id="tableStyles" border="1">
  <th>Heading 1</th>
  <th>Heading 2</th>
  <th>Heading 3</th>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
  <tr>
    <td>Even</td>
    <td>Even</td>
    <td>Even</td>
  </tr>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
  <tr>
    <td>Odd</td>
    <td>Odd</td>
    <td>Odd</td>
  </tr>
</table>

或者，如果您只想对选定的元素进行 strip 化(不引用 rowIndex):

Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tbody tr'), function(tr, collectionIndex) {
  // collectionIndex (regardless of name, it's the second argument) is
  // the index of the current array-element in the array/collection:
  tr.classList.add((collectionIndex % 2 === 0 ? 'even' : 'odd'));
});

Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tbody tr'), function(tr, collectionIndex) {
  tr.classList.add((collectionIndex % 2 === 0 ? 'even' : 'odd'));
});

.even {
  color: red;
}
.odd {
  color: blue;
}

<table id="tableStyles" border="1">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Odd</td>
      <td>Odd</td>
      <td>Odd</td>
    </tr>
    <tr>
      <td>Even</td>
      <td>Even</td>
      <td>Even</td>
    </tr>
    <tr>
      <td>Odd</td>
      <td>Odd</td>
      <td>Odd</td>
    </tr>
    <tr>
      <td>Odd</td>
      <td>Odd</td>
      <td>Odd</td>
    </tr>
  </tbody>
</table>