javascript - 如何更改从 JSON 创建的表的单元格颜色

Question

我从 JSON 创建了一个 HTML 表。该表是大学学期 map ，包括学生 ID、年份、学期以及毕业所需的类(class)。我已成功创建表格，但我希望类(class)单元格的颜色取决于类(class)状态。例如，如果学生参加了 CSCI 135，则该单元格颜色应为绿色。如果类(class)正在进行中，单元格颜色应为黄色。如果需要取出，细胞应该是红色的。

我获取所有类(class)的查询是

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

查询类(class)状态

$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 函数根据类(class)状态更改单元格的颜色，但这些都不起作用。

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>