如何更改通過JSON創建的表格的單元格顏色

Question

我從JSON創建了一個HTML表。 該表是大學學期地圖，其中包括學生的ID，年份，學期和畢業所需的課程。 我已經成功創建了表格，但是我希望課程單元格的顏色取決於課程狀態。 例如，如果學生參加了CSCI 135，則該單元格顏色應為綠色。 如果課程正在進行中，則單元格顏色應為黃色。 如果需要使用，則該單元格應該為紅色。

我查詢所有課程的信息是

$getCourses = "SELECT * FROM student_majors WHERE student_id = $studID;";

查詢課程狀態

$status = "SELECT * FROM course_status WHERE student_id = $studID;";

我用來創建表格的功能如下

function CreateTableFromJSON() {
        var myCourses = <?php echo $test1; ?> ;
        var col = [] ;
        var col2 = ["Year","Term","Requirement","","","","","Core","","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");
        var tr = table.insertRow(-1);                

        for (var i = 0; i < col2.length; i++) {
            var th = document.createElement("th");     
            th.innerHTML = col2[i];
            tr.appendChild(th);
        }
        for (var i = 0; i < myCourses.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myCourses[i][col[j]];
            }
        }
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }

我試過使用jquery，js函數根據課程的狀態更改單元格的顏色，但這些都不起作用。

function f_color(){
            if (document.getElementByTagName('td').value = 'CSCI135') {
                document.getElementByTagName('td').style.background="yellow";
            }
        }
         for (var k = 0; k< col.length; k++){
                $("#output td:contains(CSCI135)").attr("style","background-color:green");
                $("#output td:contains(CSCI135)").attr("style","background-color:red");
            }

Answer 1

我編寫了示例代碼，以在准備表格本身時設置背景顏色。 您可以參考兩種方法來設置背景顏色並嘗試在您的方案中實現它。

 var myCourses = [{ "Year": 2018, "Term": 'A', "Requirement": 'Course', "Core": 'CSCI135', "Credits": 120 }, { "Year": 2019, "Term": 'A', "Requirement": 'Course', "Core": 'CSCI136', "Credits": 130 }, { "Year": 2019, "Term": 'A', "Requirement": 'Course', "Core": 'CSCI200', "Credits": 100 }, { "Year": 2019, "Term": 'A', "Requirement": 'Course', "Core": 'CSCI123', "Credits": 140 }, { "Year": 2019, "Term": 'A', "Requirement": 'Course', "Core": 'abc', "Credits": 150 } ]; function CreateTableFromJSON() { var col = [] ; var col2 = ["Year","Term","Requirement","Core","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"); var tr = table.insertRow(-1); for (var i = 0; i < col2.length; i++) { var th = document.createElement("th"); th.innerHTML = col2[i]; tr.appendChild(th); } for (var i = 0; i < myCourses.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = myCourses[i][col[j]]; /* 1st Way*/ if(col[j] == 'Credits'){ if(myCourses[i][col[j]] > 130 ){ tabCell.style.background = 'green'; } else if(myCourses[i][col[j]] < 130 ){ tabCell.style.background = 'red'; } else { tabCell.style.background = 'yellow'; } } /*2nd Way */ if(col[j] == 'Core'){ if(myCourses[i][col[j]] == 'CSCI135' ){ tabCell.className = 'success'; } else if(myCourses[i][col[j]] == 'CSCI123' ){ tabCell.className = 'completed'; } else { tabCell.className = 'inprocess'; } } } } var divContainer = document.getElementById("showData"); divContainer.innerHTML = ""; divContainer.appendChild(table); } CreateTableFromJSON(); 

 .success{ background: green; } .completed{ background: red; } .inprocess{ background: yellow; } 

 <div id="showData"></div> 

Answer 2

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