用jquery突出显示html列的最小值
Highlight html column with minimum value with jquery
我试图突出显示具有最低值的列(或只是标题)。下面的代码我可以找到最低值,但我不知道如何找到并突出显示最低值的列。
$(function(){
var values = $('.total').map(function() {
return parseInt( $(this).html().replace("$ ","") );
}).get();
var minimum = Math.min.apply( null, values );
alert(minimum);
})
.better-price{
background-color: #ff7f50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th style="width: 100px;">Product</th>
<th style="width: 100px;">Quantity</th>
<th style="width: 100px;" id="company_1">Company 1</th>
<th style="width: 100px;" id="company_2">Company 2</th>
<th style="width: 100px;" id="company_3">Company 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>5 m</td>
<td>$ 10.00</td>
<td>$ 50.00</td>
<td>$ 50.00</td>
</tr>
<tr>
<td>Product 2</td>
<td>5 m</td>
<td>$ 20.00</td>
<td>$ 40.00</td>
<td>$ 40.00</td>
</tr>
<tr>
<td>Product 3</td>
<td>50 m2</td>
<td>$ 30.00</td>
<td>$ 30.00</td>
<td>$ 30.00</td>
</tr>
<tr>
<td>Product 4</td>
<td>2 Un</td>
<td>$ 40.00</td>
<td>$ 20.00</td>
<td>$ 20.00</td>
</tr>
<tr>
<td>Product 5</td>
<td>1 Un</td>
<td>$ 50.00</td>
<td>$ 10.00</td>
<td>$ 20.00</td>
</tr>
<tr>
<td colspan="2"><label>Total</label></td>
<td><label>$ 150.00</label></td>
<td><label>$ 150.00</label></td>
<td><label>$ 150.00</label></td>
</tr>
<tr>
<td colspan="2"><label>Shipping amount</label></td>
<td><label>$ 100.00</label></td>
<td><label>$ 99.00</label></td>
<td><label>$ 99.00</label></td>
</tr>
<tr>
<td colspan="2"><label>Total + shipping</label></td>
<td class="total">$ 250.00</td>
<td class="total">$ 249.00</td>
<td class="total">$ 259.00</td>
</tr>
<tr>
<td colspan="2"><label>Valid until</label></td>
<td><label>2015/01/01</label></td>
<td><label>2015/01/01</label></td>
<td><label>2015/01/01</label></td>
</tr>
<tr>
<td colspan="2"></td>
<td>
<button>Select</button>
</td>
<td>
<button>Select</button>
</td>
<td>
<button>Select</button>
</td>
</tr>
</tbody>
</table>
如何突出显示列或标题?
您可以遍历每个总数,然后将该类添加到最小值
$(function(){
var values = $('.total').map(function() {
return parseInt( $(this).html().replace("$ ","") );
}).get();
var minimum = Math.min.apply( null, values );
$('.total').each(function(){
if(parseInt( $(this).html().replace("$ ","")) == minimum){
$(this).addClass('better-price');
}
});
})
检查是否有帮助:http://jsfiddle.net/leojavier/y4wxf8dv/1/
$(function(){
var el;
var values = $('.total').map(function() {
el = $(this);
return parseInt( $(this).html().replace("$ ","") );
}).get();
var minimum = Math.min.apply( null, values );
var i = 1;
var index = el.parent().context.cellIndex;
var limit = $('tr').length - 5;
$('tr').each(function(){
if(i<limit) {
$('tr:nth-child('+i+')').find('td:nth-child('+parseInt(index+1) +')').addClass('better-price');
}else{
$('tr:nth-child('+i+')').find('td:nth-child('+ index+')').addClass('better-price');
}
i++
});
})
相关文章:
- Html5输入属性的默认值,如最小值、最大值、大小等
- Angular JS在一行中查找最小值
- 识别滑块范围的最小值和最大值
- 求除零以外的最小值
- Javascript-如何使用函数找到数组的最小值
- 我有一个字段计算,如果结果低于 60,则需要显示最小值
- 如何在拖动后获得图表的最小值和最大值放大高图表
- AngularJs:在数字输入字段中设置验证的条件最小值和最大值
- HTML5范围滑块最小值和最大值
- 如何仅在存在最小值和最大值时才显示错误消息
- 在 JavaScript 事件中添加最小值和最大值
- 从 JavaScript 中的数组中获取最大值和最小值
- 获取整数对象属性名称的最小值和最大值
- HTML-5 范围滑块最大值和最小值
- 如何限制html文本字段中数字的最大值和最小值
- JQuery attr不设置最大值,但设置最小值的html输入标签
- 我有四个html文本框.在其他文本框中显示最小值
- 用jquery突出显示html列的最小值
- 用javascript改变html数字最小值和最大值
- 如何在html中设置年的最大值和最小值