我很难让jQuery为每个数据值分配正确的类。
如果td .FuelInjectorQty的值小于3,则应该将类.FiJlowQty添加到父tr.FuelInjectorRow中。
如果td .FuelInjectorQty大于或等于3,则应该将类.FiJhiQty添加到父tr.FuelInjectorRow中。
if ($('.FuelInjectorQty').data('value') < 3) {
$('.FuelInjectorRow').addClass("FiJlowQty");
} else if ($('.FuelInjectorQty').data('value') >= 3) {
$('.FuelInjectorRow').addClass("FiJhiQty");
}我有一半的工作,在那里它适用于一个或另一个,但不会再这样做第二次发生。我觉得我需要一个循环或什么的,所以我尝试了每一个(),但无法使它工作。
$('.FuelInjectorRow').each(function(i) {
if ($('.FuelInjectorQty').data('value') < 3) {
$('.FuelInjectorRow').addClass("FiJlowQty");
} else if ($('.FuelInjectorQty').data('value') >= 3) {
$('.FuelInjectorRow').addClass("FiJhiQty");
}
});见Fiddle:https://jsfiddle.net/bpo29/tmbp67nL/85/
谢谢你的指点&救命!
发布于 2017-06-29 15:45:52
您必须针对要向其中添加类的tr,然后使用.addClass( function ),其中函数返回要添加到tr元素的适当类。
$('.FuelInjectorRow').addClass( function() {
return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
} );
$(function() {
$('.FuelInjectorRow').addClass( function() {
return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
} );
});/* Uploads Grid */
#UploadGrid {
font-size: 10px;
display: block;
width: 238px;
float: left;
}
#UploadGrid table {
margin: 0px;
width: auto;
text-align: center;
margin-bottom: 15px;
}
#UploadGrid td {
padding: 0;
height: 15px;
border-bottom: 1px solid #000;
}
td.DocUploadTitle {
text-align: left;
font-weight: bold;
font-size: 12px;
background-color: black !important;
color: white;
height: 35px !important;
text-transform: uppercase;
text-indent: 2em;
padding-top: 4px !important;
}
.DocUploadGridHeader {
text-align: center;
font-weight: bold;
height: 30px;
}
.DNCol {
width: 70px
}
.DDCol {
width: 65px
}
.PNCol {
width: 78px
}
.QCol {
width: 25px
}
#UploadGrid table td:nth-child(odd) {
background: #e0e0e0
}
/*
.FuelInjectorRow td {background: #f1b5b5 !important}
*/
.FiJlowQty td {
background: #f1b5b5 !important
}
.FiJhiQty td {
background: #8fe28f !important
}
.FiJlowNote {
padding: 10px;
margin-bottom: 15px;
text-align: center;
font-size: 11px;
line-height: 14px;
background-color: #f1b5b5;
}
.FiJhiNote {
padding: 10px;
margin-bottom: 15px;
text-align: center;
font-size: 11px;
line-height: 14px;
background-color: #8fe28f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="UploadGrid">
<table width="100%" cellpadding="0" cellspacing="0" style="">
<thead>
<tr>
<td colspan="4" class="DocUploadTitle">Your Uploaded Documents</td>
</tr>
<tr class="DocUploadGridHeader">
<td class="DNCol">Document
<br>Number</td>
<td class="DDCol">Document
<br>Date</td>
<td class="PNCol">Part
<br>Number</td>
<td class="QCol">Qty.</td>
</tr>
</thead>
<tbody>
<tr class="NotFuelInjector">
<td>1111</td>
<td>1/1/2017</td>
<td class="">120181C92R</td>
<td class="" data-value="5">5</td>
</tr>
<tr class="FuelInjectorRow">
<td>Should Be Red</td>
<td>3/1/2017</td>
<td class="FuelInjectorCell">288865A1R</td>
<td class="FuelInjectorQty" data-value="2">2</td>
</tr>
<tr class="NotFuelInjector">
<td>21313</td>
<td>4/1/2017</td>
<td class="">1315328C4R</td>
<td class="" data-value="1">1</td>
</tr>
<tr class="NotFuelInjector">
<td>213212</td>
<td>5/1/2017</td>
<td class="">1315328C4R</td>
<td class="" data-value="1">1</td>
</tr>
<tr class="FuelInjectorRow">
<td>Shouldnt Be Red</td>
<td>6/14/2017</td>
<td class="FuelInjectorCell">JR908507</td>
<td class="FuelInjectorQty" data-value="4">4</td>
</tr>
</tbody>
</table>
<div class='FiJlowNote'>The red highlighted row(s) are Fuel Injectors that progress will not be awarded for.
<br> You must install Fuel Injectors in quantities of 3 or more to recieve progress.</div>
<div class='FiJhiNote'>The green highlighted row(s) are Fuel Injectors that progress WILL be awarded for.
<br> You have installed Fuel Injectors in quantities of 3 or more.</div>
</div>
https://stackoverflow.com/questions/44829383
复制相似问题