无法读取表格行未定义的属性“样式”答案

【问题标题】：Cannot read property 'style' of undefined for table row无法读取表格行未定义的属性“样式”
【发布时间】：2015-01-02 03:25:26
【问题描述】：

我想为我的 html 表格替换颜色。

为此，我编写了以下函数：

function drawColorfullShelves(){
     var table = document.getElementById("table");
     for (var i = 1, row; row = table.rows[i]; i++) {
         if( i%2 == 0){
            row[i].style.color = "rgb(200, 226, 252)";
         }else{
             row[i].style.color = "rgb(251, 251, 251)";

         }
     }

 }

但在浏览器控制台中，我看到以下内容：

未捕获的类型错误：无法读取未定义的属性“样式”

如何解决？

【问题讨论】：

如果row = table.rows[i]，那么row[i]是什么？

标签： javascript html css colors html-table

【解决方案1】：

您为什么要为此使用 javascript？使用 CSS 非常简单。

tr:nth-child(odd) {
   color: rgb(251, 251, 251);
}

tr:nth-child(even) {
   color: rgb(200, 226, 252);
}

【讨论】：

因为在 javascipt 中我有时会隐藏一些行

【解决方案2】：

您的代码存在以下问题。您有一个包含 x 行数的表，您的循环定义每个变量行是 table.rows[i]。这意味着在每次迭代中，您的手都放在行上。然后在您的 if 语句中，您尝试访问 row[i]。这只是无效的。以下是更正后的代码。

function drawColorfullShelves() {
     var table = document.getElementById("table");
     for (var i = 1, row; row = table.rows[i]; i++) {
         if( i%2 == 0) {
            row.style.color = "rgb(200, 226, 252)";
         } else {
            row.style.color = "rgb(251, 251, 251)";
         }
     }
 }

这是一个小提琴http://jsfiddle.net/2pk7uvoy/

我还必须注意，javascript 中的数组是从零开始的。您的 for 循环从 1 开始，而不是从零开始。这是故意的吗？要跳过第一行吗？如果不是，那么下面应该是您更正的代码。

function drawColorfullShelves() {
     var table = document.getElementById("table");
     for (var i = 0, row; row = table.rows[i]; i++) {
         if( i%2 == 0) {
            row.style.color = "rgb(200, 226, 252)";
         } else {
            row.style.color = "rgb(251, 251, 251)";
         }
     }
 }

【讨论】：