添加顏色到使用javascript

Question

MYHTML表

<table border="1" id="pay"> 
<thead> 
<th>#</th> 
<th>Admission No</th> 
<th>Student Name</th> 
<th>Paid Amount</th> 
<th>Jan </th> 
<th>Feb </th> 
<th>March </th> 
<th>April</th> 
<th>May</th> 
<th>June</th> 
<th>July</th> 
<th>Aug</th> 
<th>Sep</th> 
<th>Oct</th> 
<th>Nov</th> 
<th>Dec</th> 
</thead> 

<tbody id="payCompClass"> 

</tbody> 
</table> 

這是我的Javascript函數動態創建的表的列，

  $.each(data["students"], function (i, item) { 

      trHTML += '<tr>' + 
       '<td>' + (i+1) + '</td>' + 
       '<td>' + item['stuid'] + '</td>' + 
       '<td>' + item['stu_name'] + '</td>' + 
       '<td>' + item['fullpayment'] + '</td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' + 
         '<td></td>' 

       +'</tr>'; 

     }); 


    for (var y = 0; y <item['fullpayment'] ; y++) { 
      $('<td></td>').style.backgroundColor = "red"; 
    } 







     $('#payCompClass').html(trHTML); 

數據是一個數組從AJAX返回， 它持有像值對此，

|id | stuid |fullname |fullpayment | 
    |0 | 1010 |abcName |3 | 
    |1 | 1011 |abcName |2 |   
    |2 | 1012 |abcName |1 |               
    |3 | 1013 |efgName |1 | 

我要的是填充顏色在TABL根據無fullpayment電子列，有沒有好辦法才達到this.Similar此，

|# | Admission |fullname|fullpayment |Jan|Feb|Mar|Apr|May|....|Dec| 
    |0 | 1010 |abcName  |3   |red|red|red|no |no|.... |no| 
    |1 | 1011 |abcName  |2   |red|red|no |no |no|.... |no|  
    |2 | 1012 |abcName  |1   |red|no |no |no |no|.... |no|              
    |3 | 1013 |efgName  |1   |red|no |no |no |no|.... |no| 

香港專業教育學院嘗試了在trHtml代碼的循環結束，但沒有工作，有人建議的解決方案這個， 謝謝。

Answer 1

你要12個月，以便循環來檢查fullpayment與支付一個月檢查.....

$.each(data["students"],function(i,item){ 
    var html = "<tr>"; 
    html += "<td>"+i+"</td><td>"+item.stuid+"</td><td>"+item.stu_name+"</td>"+ 
      "<td>"+item.fullpayment+"</td>"; 
    //checking payment month 
    for(var i = 0;i < 12;i++) { 
     if(i < item.fullpayment) { 
      html += "<td bgcolor='red'></td>"; 
     } else { 
      html += "<td>no</td>"; 
     } 
    } 
    $("tbody").append(html+"</tr>"); 
}); 

Answer 2

 
var students = [{stuid:'1',stu_name:'A',fullpayment:'3'}, 
 
{stuid:'2',stu_name:'B',fullpayment:'4'}, 
 
{stuid:'3',stu_name:'C',fullpayment:'2'}, 
 
{stuid:'4',stu_name:'D',fullpayment:'1'}]; 
 
    
 
$.each(students, function (i, item) { 
 
      var $tr=$('<tr>'); 
 
      $tr.append($('<td>',{text:(i+1)})); 
 
      $tr.append($('<td>',{text:item['stuid']})); 
 
      $tr.append($('<td>',{text:item['stu_name']})); 
 
      $tr.append($('<td>',{text:item['fullpayment']})); 
 
      $tr.append($('<td>',{text:'JAN'})); 
 
      $tr.append($('<td>',{text:'FEB'})); 
 
      $tr.append($('<td>',{text:'MAR'})); 
 
      $tr.append($('<td>',{text:'APR'})); 
 
      $tr.append($('<td>',{text:'MAY'})); 
 
      $tr.append($('<td>',{text:'JUN'})); 
 
      $tr.append($('<td>',{text:'JUL'})); 
 
      $tr.append($('<td>',{text:'AUG'})); 
 
      $tr.append($('<td>',{text:'SEP'})); 
 
      $tr.append($('<td>',{text:'OCT'})); 
 
      $tr.append($('<td>',{text:'NOV'})); 
 
      $tr.append($('<td>',{text:'DEC'})); 
 
      
 
var j=1; 
 
while(j<=item['fullpayment']) 
 
{ 
 
$tr.find('td').eq(3+j).css({color: 'red'}); 
 
j++; 
 
} 
 
$tr.appendTo($('tbody')); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table border="1" id="pay"> 
 
<thead> 
 
<th>#</th> 
 
<th>Admission No</th> 
 
<th>Student Name</th> 
 
<th>Paid Amount</th> 
 
<th>Jan </th> 
 
<th>Feb </th> 
 
<th>March </th> 
 
<th>April</th> 
 
<th>May</th> 
 
<th>June</th> 
 
<th>July</th> 
 
<th>Aug</th> 
 
<th>Sep</th> 
 
<th>Oct</th> 
 
<th>Nov</th> 
 
<th>Dec</th> 
 
</thead> 
 

 
<tbody id="payCompClass"> 
 

 
</tbody> 
 
</table>