用jquery突出显示html列的最小值

Highlight html column with minimum value with jquery

本文关键字:最小值 html 显示 jquery      更新时间:2023-09-26

我试图突出显示具有最低值的列(或只是标题)。下面的代码我可以找到最低值,但我不知道如何找到并突出显示最低值的列。

$(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++
    });
})