条带表JavaScript

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

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>

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";
  }
}

标题1
标题2
标题3
古怪的
古怪的
古怪的
即使
即使
即使
古怪的
古怪的
古怪的
古怪的
古怪的
古怪的

JS:

<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>

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";
  }
}

var isEven=函数（someNumber）{
返回（someNumber%2==0）？真：假；
};
如果isEven=true{
var styletab=document.getElementsByTagName（“表样式”）；
var cells=table.getElementsByTagName（“td”）；
对于（var i=0；i

我建议：

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+用于

document.queryselectoral（）

，Internet Explorer 9+用于

Array.prototype.forEach（）

Array.prototype.forEach.call（document.querySelectorAll（'#tableStyles tr'），function（tr）{
//rowIndex是表元素中当前行的索引：
tr.classList.add（（tr.rowIndex%2==0？'偶数'：'奇数'）；
});
。甚至{
颜色：红色；
}
.奇怪{
颜色：蓝色；
}

标题1
标题2
标题3
古怪的
古怪的
古怪的
即使
即使
即使
古怪的
古怪的
古怪的
古怪的
古怪的
古怪的
我建议：

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+用于
document.queryselectoral（）
，Internet Explorer 9+用于
Array.prototype.forEach（）


Array.prototype.forEach.call（document.querySelectorAll（'#tableStyles tr'），function（tr）{
//rowIndex是表元素中当前行的索引：
tr.classList.add（（tr.rowIndex%2==0？'偶数'：'奇数'）；
});
。甚至{
颜色：红色；
}
.奇怪{
颜色：蓝色；
}

标题1
标题2
标题3
古怪的
古怪的
古怪的
即使
即使
即使
古怪的
古怪的
古怪的
古怪的
古怪的
古怪的
从代码中我可以看出您是JS新手。因此，我认为指出你的错误是好的，而不是为你解决整个问题

//Here you are creating a function to return true or false using a function which
//already returning true or false.
var isEven = function(someNumber) {
  return (someNumber%2 == 0) ? true : false;
};
//above can be reduced to this.
(someNumber%2==0); //will return true if even and false if odd.

// The syntax of if statement is wrong. It should be if (statement) { do stuff here...}
// Notice the difference between '=' and '=='. The first assigns value and the second checks if both sides are same.
// The isEven function should have an input to give either true or false.
// Finally you should first get the rows in the table as an array and loop through it and then do this if statement.
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";
  }
}

// the above should be organised in the format below.
var table = ;//get the table here.
var rows = ;//get the rows in the table here.
for (i in rows) {
    var row = rows[i]; //get the current row
    var cells = ;//get cells from the current row
    if(i%2==0) {   
        //set formatting for the cells here if the row number is even.
    } else {
        //set formatting for the cells here if the row number is odd.
    }
}

//这里您正在创建一个函数，使用一个
//已经返回真或假。
var isEven=函数（someNumber）{
返回（someNumber%2==0）？真：假；
};
//以上可以归结为这一点。
（someNumber%2==0）//如果偶数，则返回true；如果奇数，则返回false。
//if语句的语法错误。应该是（语句）{在这里做东西…}
//请注意“=”和“=”之间的区别。第一个赋值，第二个检查两边是否相同。
//isEven函数应该有一个输入，可以给出true或false。
//最后，您应该首先将表中的行作为数组进行循环，然后执行if语句。
如果isEven=true{
var styletab=document.getElementsByTagName（“表样式”）；
var cells=table.getElementsByTagName（“td”）；
对于（var i=0；i

确保绝对确定选择器（getElementById等）的工作方式以及它们返回的内容，以便正确使用它们。例如，getElementsByTagName根据标记名（“div”“table”等）进行搜索，但getElementById根据标记的id进行搜索，在本例中为“tableStyles”。希望我为您指明了正确的方向。
从代码中我可以看出您是JS新手。因此，我认为指出你的错误是好的，而不是为你解决整个问题

//Here you are creating a function to return true or false using a function which
//already returning true or false.
var isEven = function(someNumber) {
  return (someNumber%2 == 0) ? true : false;
};
//above can be reduced to this.
(someNumber%2==0); //will return true if even and false if odd.

// The syntax of if statement is wrong. It should be if (statement) { do stuff here...}
// Notice the difference between '=' and '=='. The first assigns value and the second checks if both sides are same.
// The isEven function should have an input to give either true or false.
// Finally you should first get the rows in the table as an array and loop through it and then do this if statement.
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";
  }
}

// the above should be organised in the format below.
var table = ;//get the table here.
var rows = ;//get the rows in the table here.
for (i in rows) {
    var row = rows[i]; //get the current row
    var cells = ;//get cells from the current row
    if(i%2==0) {   
        //set formatting for the cells here if the row number is even.
    } else {
        //set formatting for the cells here if the row number is odd.
    }
}

//这里您正在创建一个函数，使用一个
//已经返回真或假。
var isEven=函数（someNumber）{
返回（someNumber%2==0）？真：假；
};
//以上可以归结为这一点。
（someNumber%2==0）//如果偶数，则返回true；如果奇数，则返回false。
//if语句的语法错误。应该是（语句）{在这里做东西…}
//请注意“=”和“=”之间的区别。第一个赋值，第二个检查两边是否相同。
//isEven函数应该有一个输入，可以给出true或false。
//最后，您应该首先将表中的行作为数组进行循环，然后执行if语句。
如果isEven=true{
var styletab=document.getElementsByTagName（“表样式”）；
var cells=table.getElementsByTagName（“td”）；
对于（var i=0；i