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

Question

I have a HTML table created by JSON. The table is a college semaster's map, it lists all the required courses for your major. I want the courses' cell color depends on the status. For example, green means course is completed, yellow means in progress and red means need to be taken. below is the columns, and createtablefromJSON function

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

My question is how to change cell's color based on status of the course

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

you have to check your in array like this,

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

Convert php array to js array. Then use .includes() function to check

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