javascript - 根据状态更改 JSON HTML 表格单元格颜色

Question

我有一个由 JSON 创建的 HTML 表。该表是大学学期的 map ，它列出了您专业的所有必修类(class)。我希望类(class)的单元格颜色取决于状态。例如，绿色表示类(class)已完成，黄色表示正在进行中，红色表示需要参加。下面是列和 createtablefromJSON 函数

var col2 = ["year","term","major1","major2","major3","major4","major5","core1","Core2","Credits"] ;

function CreateTableFromJSON() {
        var myCourses = <?php echo $test1; ?> ;
        var col = [] ;// EXTRACT VALUE FOR HTML HEADER. 
        var col2 = ["year","term","major1","major2","major3","major4","major5","core1","Core2","Credits"] ;
        for (var i = 0; i < myCourses.length; i++) {
            for (var key in myCourses[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }
        var table = document.createElement("table");        // CREATE DYNAMIC TABLE.
        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
        var tr = table.insertRow(-1);                   // TABLE ROW.
        for (var i = 0; i < col2.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col2[i];
            tr.appendChild(th);
        }

我的问题是如何根据类(class)状态更改单元格的颜色

for (var i = 0; i < myCourses.length; i++) {
          tr = table.insertRow(-1);  // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var j = 0; j < col2.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myCourses[i][col[j]];     
                   if (<?php in_array ?> (myCourses[i][col[j]] <?php  echo ",". json_encode($done_course) ?> )  {
                                  <?php if ($done) { ?> tabCell.className = 'success'; <?php } ?>  }

                   if (<?php in_array ?> (myCourses[i][col[j]] <?php echo ",". json_encode($pending_course) ?> )  {
                                  <?php if ($pending) { ?> tabCell.className = 'pending'; <?php } ?>  }
                          }
                   if (<?php in_array ?> (myCourses[i][col[j]] <?php echo ",". json_encode($progess_course) ?> )  {
                                  <?php if ($progess) { ?> tabCell.className = 'inprocess'; <?php } ?>  }
                          }
                      }     
                  }
              }
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }

Answer 1

你必须像这样检查你的数组，

indexOf()

if (myCourses[i][col[j]] == "<?php echo $done_course; ?>")  {
  <?php if ($done) { ?> tabCell.className = 'success'; <?php } ?>
}
else if (myCourses[i][col[j]] == "<?php echo $pending_course; ?>")  {
  <?php if ($pending) { ?> tabCell.className = 'pending'; <?php } ?>  }
}
else {
  <?php if ($progess) { ?> tabCell.className = 'inprocess'; <?php } ?>  }
}