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

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

$(function(){ 
 
\t var values = $('.total').map(function() { 
 
\t \t return parseInt($(this).html().replace("$ ","")); 
 
\t }).get(); 
 

 
\t var minimum = Math.min.apply(null, values); 
 
\t 
 
\t 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> 
 
\t   <th style="width: 100px;" id="company_3">Company 3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
\t \t <tr> 
 
\t \t \t <td>Product 1</td> 
 
\t \t \t <td>5 m</td> 
 
\t \t \t <td>$ 10.00</td> 
 
\t \t \t <td>$ 50.00</td> 
 
\t \t \t <td>$ 50.00</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Product 2</td> 
 
\t \t \t <td>5 m</td> 
 
\t \t \t <td>$ 20.00</td> 
 
\t \t \t <td>$ 40.00</td> 
 
\t \t \t <td>$ 40.00</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Product 3</td> 
 
\t \t \t <td>50 m2</td> 
 
\t \t \t <td>$ 30.00</td> 
 
\t \t \t <td>$ 30.00</td> 
 
\t \t \t <td>$ 30.00</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Product 4</td> 
 
\t \t \t <td>2 Un</td> 
 
\t \t \t <td>$ 40.00</td> 
 
\t \t \t <td>$ 20.00</td> 
 
\t \t \t <td>$ 20.00</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Product 5</td> 
 
\t \t \t <td>1 Un</td> 
 
\t \t \t <td>$ 50.00</td> 
 
\t \t \t <td>$ 10.00</td> 
 
\t \t \t <td>$ 20.00</td> 
 
\t \t </tr> 
 
     <tr> 
 
      <td colspan="2"><label>Total</label></td> 
 
\t \t \t <td><label>$ 150.00</label></td> 
 
\t \t \t <td><label>$ 150.00</label></td> 
 
\t \t \t <td><label>$ 150.00</label></td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"><label>Shipping amount</label></td> 
 
\t \t \t <td><label>$ 100.00</label></td> 
 
\t \t \t <td><label>$ 99.00</label></td> 
 
\t \t \t <td><label>$ 99.00</label></td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"><label>Total + shipping</label></td> 
 
\t \t \t <td class="total">$ 250.00</td> 
 
\t \t \t <td class="total">$ 249.00</td> 
 
\t \t \t <td class="total">$ 259.00</td> 
 
     </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="2"><label>Valid until</label></td> 
 
\t \t \t <td><label>2015/01/01</label></td> 
 
\t \t \t <td><label>2015/01/01</label></td> 
 
\t \t \t <td><label>2015/01/01</label></td> 
 
\t \t </tr> 
 
     <tr> 
 
      <td colspan="2"></td> 
 
\t \t \t <td> 
 
\t \t \t \t <button>Select</button> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <button>Select</button> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <button>Select</button> 
 
\t \t \t </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

任何ideias我怎么能hightlight列或标题？

来源

2015-08-28 Tiago Crizanto

这可能是更容易做服务器上的计算一边（如果可以的话）和装饰类的方式。否则，我认为你需要编写一个javascript函数来解析表，并确定父列 – cgatian

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

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

来源

2015-08-28 01:07:51 Pindo

感谢您的帮助。你的代码有效！我只是在第二个函数中进行了修正。您需要在$（this）.html（）。添加parseInt（“$”，“”）来与mininum值进行比较。 –

@TiagoCrizanto请为未来的用户标记正确的答案。 – Pindo

这不是正确的答案...问题是突出显示列...不突出显示单元格... –

检查这有助于：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++ 
    }); 

})

来源

2015-08-28 01:14:55

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

回答

相关问题