我有这张桌子：
<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>
其中<td class="realPlanDate" data-bind="text: realPlanDate"></td>保留日期字符串，<td class="changeFont" data-bind="text: changeFont" style="width: 5em;"></td>返回1，前一行的realPlanDate与当前行的日期相同{{1}当它不一样的时候。
现在它看起来像这样： ！[图像] [1]
我在我的视图模型中使用以下代码实现它：
0我要做的是在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;
});
};
时将行颜色替换为previous行的颜色，但我找不到方法。
我试过这个（真的很棒），但它不起作用：
changeFont == 1请给我一个关于这个问题的线索，我迷失了，真的想不出一个逻辑方法来实现我想要的。
答案 0 :(得分：1)
您可以使用css only solution
轻松维护此问题tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}