doulou0882
doulou0882
2019-04-17 04:24

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

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);
    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • donglu5728 donglu5728 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'; }
            }
        }
    
    点赞 评论 复制链接分享
  • dragon88112 dragon88112 2年前

    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 } ?>  }
    }
    
    点赞 评论 复制链接分享