根據狀態更改JSON的HTML表格的單元格顏色

Question

我有一個由JSON創建的HTML表。 該表是一個大學制作者的地圖，它列出了所有必修課程。 我希望課程的單元格顏色取決於狀態。 例如，綠色表示課程已完成，黃色表示正在進行，需要采用紅色表示。 下面是列，以及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);
        }

我的問題是如何根據課程的狀態改變細胞的顏色

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

Answer 2

將php數組轉換為js數組。 然后使用.includes（）函數進行檢查

 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);
            var done_course = <?php echo json_encode($done_course); ?> ;
            var pending_course = <?php echo json_encode($pending_course); ?> ;
            var progress_course = <?php echo json_encode($progress_course); ?> ;
            tabCell.innerHTML = myCourses[i][col[j]];     
              if (done_course.includes(myCourses[i][col[j]])) {
                tabCell.className = 'success'; 
              } else if (pending_course.includes(myCourses[i][col[j]])) {
                tabCell.className = 'completed'; }
                  else {
                    tabCell.className = 'inprocess'; }
        }
    }