adding color to a dynamically created table columns using javascript

Question

MyHtml Table

<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>

And here is my Javascript function,

            $.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);

Data is an array returning from a ajax, It holds values like this,

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

What i want is to fill a color in the table columns according to no of fullpayment,Is there a good way to achive this.Similar to this,

   |#   | 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|

Ive tried a for loop in the end of the trHtml code but not working,Can Someone Suggest a Solution for this, Thank You.

Answer 1

You want to check fullpayment in 12 months so loop and check with payment month over .....

 $.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>