开发者

Jquery:Keep unique Items in table row with minimum price?

开发者 https://www.devze.com 2023-03-29 21:49 出处:网络
In this bellow table, We can see two items TV and CAR with two different prices. I want display both two items with their minimum price without repeating duplicate items.

In this bellow table, We can see two items TV and CAR with two different prices. I want display both two items with their minimum price without repeating duplicate items.

Sample Table:

<table>
  <tr>
    <th>Items</th>
    <th>Price</th>
  </tr>

  <tr>
    <td>TV</td>
    <td>10000</td>
  </tr>

  <tr>
    <td>TV</td>
    <td>15000</td>
  </tr>

  <tr>
    <td>CAR</td>
  开发者_高级运维  <td>750000</td>
  </tr>

  <tr>
    <td>CAR</td>
    <td>450000</td>
  </tr>   
</table>

Target Table:

    <table>
        <tr>
            <th>Items</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>TV</td>
            <td>10000</td>
        </tr>
        <tr>
            <td>CAR</td>
            <td>450000</td>
        </tr>   
    </table>


Try this.

var item = {};
$(".myTable td:first-child").each(function() {
    var key = $(this).text();
    var val = $(this).closest("td").next().text();
    if (!item.hasOwnProperty(key) || item[key] - val > 0) {
        item[key] = val;
    }
});
var t ="<tr><th>Items</th><th>Price</th></tr>"
$.each(item, function(k, v) {
    t += "<tr><td>" + k + "</td><td>" + v + "</td></tr>";
});
$(".myTable").html(t);

Demo: http://jsfiddle.net/naveen/uknkS/


This may not be the most elegant way of doing this, but it accomplishes your goal in both IE 8 and Firefox:

$(document).ready(function(){
    var cheapest = new Array();

    //Build cheapest array
    $('table tr').each(function(){
         var key = $(this).children('td:first-child').html();
         var value = $(this).children('td:last-child').html();
         if (key != null &&             //Verifies this is not the header
            (value < cheapest[key] || cheapest[key] ==null) ) {   
              cheapest[key] = value;
         }
    });

    //Hide the rows that don't match
    $('table tr').each(function(){
         var current_row = this;
         var key = $(this).children('td:first-child').html();
         var value = $(this).children('td:last-child').html();
         if( key != null && cheapest[key] != value ){
             $(current_row).hide();
         }
    });
});


Here you go

Working demo

$(function(){
   var $UniqueTds = []; 
    var $trs = $("table tr:gt(0)"); 

   $("table tr td:first-child").each(function(){
        if($.inArray($(this).text(), $UniqueTds) == -1){
            $UniqueTds.push($(this).text());
        }
   });

   var $tr = null; 
   $.each($UniqueTds, function(i, val){
       $tr = null;

       $trs.filter(function(){ return $(this).find("td:first").text() == val;})
           .each(function(){

               if($tr == null){
                   $tr = $(this);
               }
               else if(parseInt($tr.find("td:last").text()) < parseInt($(this).find("td:last").text())){
                       $tr = $(this);
               }
           });
           $tr.remove();
   });
});


  [1]: http://jsfiddle.net/WLhkU/
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号