条带表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>

或者,如果您想仅对选定的元素进行条带化(不参考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>