无法找到更改行颜色的方法
[英]Can't find a way to change the row color
问题描述
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. 其中<td class="realPlanDate" data-bind="text: realPlanDate"></td>保留日期字符串，而<td class="changeFont" data-bind="text: changeFont" style="width: 5em;"></td>如果前一行的realPlanDate与当前行的日期相同，则返回1 ， realPlanDate返回0 。
Now it looks like this: ![image][1] 现在看起来像这样：！[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. 我想做的是，当changeFont == 1时，用previous一行的颜色替换行的颜色，但我找不到办法。
I have tried this(really nooby), but it doesn't work: 我已经尝试过这个（真的是nooby），但是不起作用：
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 个解决方案
解决方案1
1 已采纳 2014-02-10 07:53:26
You can easily maintain this with css only solution : 您可以使用css only解决方案轻松地维护它：
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
SlickGrid 2.0无法更改奇数索引中的行背景颜色 - SlickGrid 2.0 can't change row background color in odd indexes
找不到在运行时更改reactjs元素位置的方法 - 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
我无法在SVG中更改颜色 - I can't change color in SVG
无法使用选色器更改css a：hover上的颜色？ - Can't change color on css a:hover with a colorpicker?
故事书：无法更改 UI 上的主题颜色 - Storybook: can't change theming color on UI
无法更改 Raphael 中的填充颜色？ - can't change the fill color in Raphael?
相关标签