javascript - 使用jquery突出显示具有最小值的html列

Question

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

$(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>

有什么想法可以突出显示列或标题吗？

Answer 1

您可以循环遍历每个总计，然后将该类添加到最小值

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