Can't find a way to change the row color
Question
I have this table:
<table class="dataTable" id="repaymentPlan">
<thead>
<tr>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
<th>4</th>
<th>5</th>
<th style="width: 5em;">6(b)</th>
<th style="width: 5em;">7</th>
<th style="width: 5em;">8</th>
<th>9</th>
<th>-</th>
<th>10</th>
<th style="width: 5em;">11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>-</th>
<th>15</th>
<th>16</th>
<th style="width: 5em;">Change font</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: creditCalculationDetails">
<tr>
<td class="realPlanDate" data-bind="text: realPlanDate"></td>
<td class="pro" data-bind="text: pro"></td>
<td class="q" data-bind="text: q"></td>
<td class="z" data-bind="text: z"></td>
<td class="gT" data-bind="text: g"></td>
<td class="b" data-bind="text: b" style="width: 5em;"></td>
<td class="c" data-bind="text: c" style="width: 5em;"></td>
<td class="e" data-bind="text: e" style="width: 5em;"></td>
<td class="f" data-bind="text: f"></td>
<td></td>
<td class="assimilationDate" data-bind="text: assimilationDate"></td>
<td class="a" data-bind="text: a" style="width: 5em;"></td>
<td class="h" data-bind="text: h"></td>
<td class="i" data-bind="text: i"></td>
<td class="eT" data-bind="text: eT"></td>
<td></td>
<td class="mDays" data-bind="text: mDays" style="width: 5em;"></td>
<td class="nDays" data-bind="text: nDays" style="width: 5em;"></td>
<td class="changeFont" data-bind="text: changeFont" style="width: 5em;"></td>
<td></td>
</tr>
</tbody>
</table>
where <td class="realPlanDate" data-bind="text: realPlanDate"></td> keeps a date String and <td class="changeFont" data-bind="text: changeFont" style="width: 5em;"></td> returns 1 when the realPlanDate of the previous row is the same as the date of the current row and 0 when it's not the same.
Now it looks like this: ![image][1]
I'm achieveing it in my view model with the code below:
changeFont = function(){
var rowId = 0;
var prevRowId = 0;
var prevChangeFont = null;
var flag = false;
$("tbody").find("tr").each(function() {
console.log("test: " + rowId);
console.log("prevTest: " + prevRowId);
var paymentDate = $(this).find('td.realPlanDate').text();
var pro = $(this).find('td.pro').text();
var q = $(this).prev().find('td.q').text();
var z = $(this).find('td.z').text();
var gT = $(this).find('td.gT').text();
var b = $(this).find('td.b').text();
var c = $(this).prev().find('td.c').text();
var e = $(this).find('td.e').text();
var f = $(this).find('td.f').text();
var assimilationDate = $(this).find('td.assimilationDate').text();
var a = $(this).find('td.a').text();
var h = $(this).find('td.h').text();
var i = $(this).find('td.i').text();
var eT = $(this).find('td.eT').text();
var mDays = $(this).find('td.mDays').text();
var nDays = $(this).find('td.nDays').text();
var changeFont = $(this).find('td.changeFont').text();
if(rowId == 0){
$(this).find('td.realPlanDate').css('backgroundColor', '#CED8F6');
$(this).find('td.pro').css('backgroundColor', '#CED8F6');
$(this).find('td.q').css('backgroundColor', '#CED8F6');
$(this).find('td.z').css('backgroundColor', '#CED8F6');
$(this).find('td.gT').css('backgroundColor', '#CED8F6');
$(this).find('td.b').css('backgroundColor', '#CED8F6');
$(this).find('td.c').css('backgroundColor', '#CED8F6');
$(this).find('td.e').css('backgroundColor', '#CED8F6');
$(this).find('td.f').css('backgroundColor', '#CED8F6');
$(this).find('td.assimilationDate').css('backgroundColor', '#CED8F6');
$(this).find('td.a').css('backgroundColor', '#CED8F6');
$(this).find('td.h').css('backgroundColor', '#CED8F6');
$(this).find('td.i').css('backgroundColor', '#CED8F6');
$(this).find('td.eT').css('backgroundColor', '#CED8F6');
$(this).find('td.mDays').css('backgroundColor', '#CED8F6');
$(this).find('td.nDays').css('backgroundColor', '#CED8F6');
$(this).find('td.changeFont').css('backgroundColor', '#CED8F6');
}
if(rowId == 1){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
}
prevRowId = rowId;
if(rowId == 0){
rowId = 1;
}else{
rowId = 0;
}
prevChangeFont = changeFont;
});
};
What I'm trying to do is to replace the row color with the color of the previous row, when changeFont == 1 , but I can't find a way.
I have tried this(really nooby), but it doesn't work:
changeFont = function(){
var rowId = 0;
var prevRowId = 0;
var prevChangeFont = null;
var flag = false;
$("tbody").find("tr").each(function() {
console.log("test: " + rowId);
console.log("prevTest: " + prevRowId);
var paymentDate = $(this).find('td.realPlanDate').text();
var pro = $(this).find('td.pro').text();
var q = $(this).prev().find('td.q').text();
var z = $(this).find('td.z').text();
var gT = $(this).find('td.gT').text();
var b = $(this).find('td.b').text();
var c = $(this).prev().find('td.c').text();
var e = $(this).find('td.e').text();
var f = $(this).find('td.f').text();
var assimilationDate = $(this).find('td.assimilationDate').text();
var a = $(this).find('td.a').text();
var h = $(this).find('td.h').text();
var i = $(this).find('td.i').text();
var eT = $(this).find('td.eT').text();
var mDays = $(this).find('td.mDays').text();
var nDays = $(this).find('td.nDays').text();
var changeFont = $(this).find('td.changeFont').text();
if(rowId == 0){
$(this).find('td.realPlanDate').css('backgroundColor', '#CED8F6');
$(this).find('td.pro').css('backgroundColor', '#CED8F6');
$(this).find('td.q').css('backgroundColor', '#CED8F6');
$(this).find('td.z').css('backgroundColor', '#CED8F6');
$(this).find('td.gT').css('backgroundColor', '#CED8F6');
$(this).find('td.b').css('backgroundColor', '#CED8F6');
$(this).find('td.c').css('backgroundColor', '#CED8F6');
$(this).find('td.e').css('backgroundColor', '#CED8F6');
$(this).find('td.f').css('backgroundColor', '#CED8F6');
$(this).find('td.assimilationDate').css('backgroundColor', '#CED8F6');
$(this).find('td.a').css('backgroundColor', '#CED8F6');
$(this).find('td.h').css('backgroundColor', '#CED8F6');
$(this).find('td.i').css('backgroundColor', '#CED8F6');
$(this).find('td.eT').css('backgroundColor', '#CED8F6');
$(this).find('td.mDays').css('backgroundColor', '#CED8F6');
$(this).find('td.nDays').css('backgroundColor', '#CED8F6');
$(this).find('td.changeFont').css('backgroundColor', '#CED8F6');
}
if(rowId == 1){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
}
if(rowId == 0 && prevRowId == 1 && changeFont == 1 && prevChangeFont == 1){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
flag = true;
}
if(rowId == 0 && prevRowId == 1 && changeFont == 1 && prevChangeFont == 0){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
flag = true;
}
if(rowId == 1 && prevRowId == 0 && changeFont == 1 && prevChangeFont == 1){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
flag = true;
}
if(rowId == 1 && prevRowId == 0 && changeFont == 1 && prevChangeFont == 0){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
flag = true;
}
if(rowId == 1 && prevRowId == 0 && flag){
$(this).find('td.realPlanDate').css('backgroundColor', '#CED8F6');
$(this).find('td.pro').css('backgroundColor', '#CED8F6');
$(this).find('td.q').css('backgroundColor', '#CED8F6');
$(this).find('td.z').css('backgroundColor', '#CED8F6');
$(this).find('td.gT').css('backgroundColor', '#CED8F6');
$(this).find('td.b').css('backgroundColor', '#CED8F6');
$(this).find('td.c').css('backgroundColor', '#CED8F6');
$(this).find('td.e').css('backgroundColor', '#CED8F6');
$(this).find('td.f').css('backgroundColor', '#CED8F6');
$(this).find('td.assimilationDate').css('backgroundColor', '#CED8F6');
$(this).find('td.a').css('backgroundColor', '#CED8F6');
$(this).find('td.h').css('backgroundColor', '#CED8F6');
$(this).find('td.i').css('backgroundColor', '#CED8F6');
$(this).find('td.eT').css('backgroundColor', '#CED8F6');
$(this).find('td.mDays').css('backgroundColor', '#CED8F6');
$(this).find('td.nDays').css('backgroundColor', '#CED8F6');
$(this).find('td.changeFont').css('backgroundColor', '#CED8F6');
}
if(rowId == 0 && prevRowId == 1 && flag){
$(this).find('td.realPlanDate').css('backgroundColor', '#819FF7');
$(this).find('td.pro').css('backgroundColor', '#819FF7');
$(this).find('td.q').css('backgroundColor', '#819FF7');
$(this).find('td.z').css('backgroundColor', '#819FF7');
$(this).find('td.gT').css('backgroundColor', '#819FF7');
$(this).find('td.b').css('backgroundColor', '#819FF7');
$(this).find('td.c').css('backgroundColor', '#819FF7');
$(this).find('td.e').css('backgroundColor', '#819FF7');
$(this).find('td.f').css('backgroundColor', '#819FF7');
$(this).find('td.assimilationDate').css('backgroundColor', '#819FF7');
$(this).find('td.a').css('backgroundColor', '#819FF7');
$(this).find('td.h').css('backgroundColor', '#819FF7');
$(this).find('td.i').css('backgroundColor', '#819FF7');
$(this).find('td.eT').css('backgroundColor', '#819FF7');
$(this).find('td.mDays').css('backgroundColor', '#819FF7');
$(this).find('td.nDays').css('backgroundColor', '#819FF7');
$(this).find('td.changeFont').css('backgroundColor', '#819FF7');
}
if(rowId == 1 && prevRowId == 0 && flag){
$(this).find('td.realPlanDate').css('backgroundColor', '#CED8F6');
$(this).find('td.pro').css('backgroundColor', '#CED8F6');
$(this).find('td.q').css('backgroundColor', '#CED8F6');
$(this).find('td.z').css('backgroundColor', '#CED8F6');
$(this).find('td.gT').css('backgroundColor', '#CED8F6');
$(this).find('td.b').css('backgroundColor', '#CED8F6');
$(this).find('td.c').css('backgroundColor', '#CED8F6');
$(this).find('td.e').css('backgroundColor', '#CED8F6');
$(this).find('td.f').css('backgroundColor', '#CED8F6');
$(this).find('td.assimilationDate').css('backgroundColor', '#CED8F6');
$(this).find('td.a').css('backgroundColor', '#CED8F6');
$(this).find('td.h').css('backgroundColor', '#CED8F6');
$(this).find('td.i').css('backgroundColor', '#CED8F6');
$(this).find('td.eT').css('backgroundColor', '#CED8F6');
$(this).find('td.mDays').css('backgroundColor', '#CED8F6');
$(this).find('td.nDays').css('backgroundColor', '#CED8F6');
$(this).find('td.changeFont').css('backgroundColor', '#CED8F6');
}
prevRowId = rowId;
if(rowId == 0){
rowId = 1;
}else{
rowId = 0;
}
prevChangeFont = changeFont;
});
};
Please, give me a clue on the issue, I'm lost and really can't think of a logic way to achieve what I want.
1 answers
solution1
1 ACCPTED 2014-02-10 07:53:26
You can easily maintain this with css only solution :
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
SlickGrid 2.0 can't change row background color in odd indexes
Can't find a way to change reactjs element position on runtime
I can't find a way to change the canvas size
Can't change background color
Can't change font color
Can't change color on an image drawing canvas
I can't change color in SVG
Can't change color on css a:hover with a colorpicker?
Storybook: can't change theming color on UI
can't change the fill color in Raphael?
Related Tags