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

如何更改通过JSON创建的表格的单元格颜色

2 个答案: