Sunday, April 2, 2017

vendor rate comparison example with color code

rate comparison example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Color Code example for vendor rate comparison</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>

  <body>

                                        <table width="500px">
                      <thead>
                        <tr>
                          <th>Sn.</th>
                          <th>Vendor</th>
                          <th>Item</th>
                          <th>Brand</th>
                          <th>Rate</th>
                          <th>itemCode</th>
                        </tr>
                      </thead>
                      <tbody>
                                                  <tr id="ven1itm1brand11">
                            <td>1</td>
                            <td>ven1</td>
                            <td>itm1</td>
                            <td>brand11</td>
                            <td data-colorId="ven1itm1brand11" data-ven="ven1" data-itm="itm1" data-brand="brand11" data-rate="50"  class="rate">50</td>
                            <td>itm1brand11</td>
                          </tr>
                                                    <tr id="ven1itm1brand12">
                            <td>2</td>
                            <td>ven1</td>
                            <td>itm1</td>
                            <td>brand12</td>
                            <td data-colorId="ven1itm1brand12" data-ven="ven1" data-itm="itm1" data-brand="brand12" data-rate="60"  class="rate">60</td>
                            <td>itm1brand12</td>
                          </tr>
                                                    <tr id="ven1itm1brand13">
                            <td>3</td>
                            <td>ven1</td>
                            <td>itm1</td>
                            <td>brand13</td>
                            <td data-colorId="ven1itm1brand13" data-ven="ven1" data-itm="itm1" data-brand="brand13" data-rate="70"  class="rate">70</td>
                            <td>itm1brand13</td>
                          </tr>
                                                    <tr id="ven1itm2brand21">
                            <td>4</td>
                            <td>ven1</td>
                            <td>itm2</td>
                            <td>brand21</td>
                            <td data-colorId="ven1itm2brand21" data-ven="ven1" data-itm="itm2" data-brand="brand21" data-rate="50"  class="rate">50</td>
                            <td>itm2brand21</td>
                          </tr>
                                                    <tr id="ven1itm2brand22">
                            <td>5</td>
                            <td>ven1</td>
                            <td>itm2</td>
                            <td>brand22</td>
                            <td data-colorId="ven1itm2brand22" data-ven="ven1" data-itm="itm2" data-brand="brand22" data-rate="60"  class="rate">60</td>
                            <td>itm2brand22</td>
                          </tr>
                                                    <tr id="ven1itm2brand23">
                            <td>6</td>
                            <td>ven1</td>
                            <td>itm2</td>
                            <td>brand23</td>
                            <td data-colorId="ven1itm2brand23" data-ven="ven1" data-itm="itm2" data-brand="brand23" data-rate="70"  class="rate">70</td>
                            <td>itm2brand23</td>
                          </tr>
                                                    <tr id="ven1itm3brand31">
                            <td>7</td>
                            <td>ven1</td>
                            <td>itm3</td>
                            <td>brand31</td>
                            <td data-colorId="ven1itm3brand31" data-ven="ven1" data-itm="itm3" data-brand="brand31" data-rate="50"  class="rate">50</td>
                            <td>itm3brand31</td>
                          </tr>
                                                    <tr id="ven1itm3brand32">
                            <td>8</td>
                            <td>ven1</td>
                            <td>itm3</td>
                            <td>brand32</td>
                            <td data-colorId="ven1itm3brand32" data-ven="ven1" data-itm="itm3" data-brand="brand32" data-rate="60"  class="rate">60</td>
                            <td>itm3brand32</td>
                          </tr>
                                                    <tr id="ven1itm3brand33">
                            <td>9</td>
                            <td>ven1</td>
                            <td>itm3</td>
                            <td>brand33</td>
                            <td data-colorId="ven1itm3brand33" data-ven="ven1" data-itm="itm3" data-brand="brand33" data-rate="70"  class="rate">70</td>
                            <td>itm3brand33</td>
                          </tr>
                                                    <tr id="ven2itm1brand11">
                            <td>10</td>
                            <td>ven2</td>
                            <td>itm1</td>
                            <td>brand11</td>
                            <td data-colorId="ven2itm1brand11" data-ven="ven2" data-itm="itm1" data-brand="brand11" data-rate="55"  class="rate">55</td>
                            <td>itm1brand11</td>
                          </tr>
                                                    <tr id="ven2itm1brand12">
                            <td>11</td>
                            <td>ven2</td>
                            <td>itm1</td>
                            <td>brand12</td>
                            <td data-colorId="ven2itm1brand12" data-ven="ven2" data-itm="itm1" data-brand="brand12" data-rate="70"  class="rate">70</td>
                            <td>itm1brand12</td>
                          </tr>
                                                    <tr id="ven2itm1brand13">
                            <td>12</td>
                            <td>ven2</td>
                            <td>itm1</td>
                            <td>brand13</td>
                            <td data-colorId="ven2itm1brand13" data-ven="ven2" data-itm="itm1" data-brand="brand13" data-rate="50"  class="rate">50</td>
                            <td>itm1brand13</td>
                          </tr>
                                                    <tr id="ven2itm2brand21">
                            <td>13</td>
                            <td>ven2</td>
                            <td>itm2</td>
                            <td>brand21</td>
                            <td data-colorId="ven2itm2brand21" data-ven="ven2" data-itm="itm2" data-brand="brand21" data-rate="55"  class="rate">55</td>
                            <td>itm2brand21</td>
                          </tr>
                                                    <tr id="ven2itm2brand22">
                            <td>14</td>
                            <td>ven2</td>
                            <td>itm2</td>
                            <td>brand22</td>
                            <td data-colorId="ven2itm2brand22" data-ven="ven2" data-itm="itm2" data-brand="brand22" data-rate="60"  class="rate">60</td>
                            <td>itm2brand22</td>
                          </tr>
                                                    <tr id="ven2itm2brand23">
                            <td>15</td>
                            <td>ven2</td>
                            <td>itm2</td>
                            <td>brand23</td>
                            <td data-colorId="ven2itm2brand23" data-ven="ven2" data-itm="itm2" data-brand="brand23" data-rate="45"  class="rate">45</td>
                            <td>itm2brand23</td>
                          </tr>
                                                    <tr id="ven2itm3brand31">
                            <td>16</td>
                            <td>ven2</td>
                            <td>itm3</td>
                            <td>brand31</td>
                            <td data-colorId="ven2itm3brand31" data-ven="ven2" data-itm="itm3" data-brand="brand31" data-rate="40"  class="rate">40</td>
                            <td>itm3brand31</td>
                          </tr>
                                                    <tr id="ven2itm3brand32">
                            <td>17</td>
                            <td>ven2</td>
                            <td>itm3</td>
                            <td>brand32</td>
                            <td data-colorId="ven2itm3brand32" data-ven="ven2" data-itm="itm3" data-brand="brand32" data-rate="50"  class="rate">50</td>
                            <td>itm3brand32</td>
                          </tr>
                                                    <tr id="ven2itm3brand33">
                            <td>18</td>
                            <td>ven2</td>
                            <td>itm3</td>
                            <td>brand33</td>
                            <td data-colorId="ven2itm3brand33" data-ven="ven2" data-itm="itm3" data-brand="brand33" data-rate="65"  class="rate">65</td>
                            <td>itm3brand33</td>
                          </tr>
                                                    <tr id="ven3itm1brand11">
                            <td>19</td>
                            <td>ven3</td>
                            <td>itm1</td>
                            <td>brand11</td>
                            <td data-colorId="ven3itm1brand11" data-ven="ven3" data-itm="itm1" data-brand="brand11" data-rate="55"  class="rate">55</td>
                            <td>itm1brand11</td>
                          </tr>
                                                    <tr id="ven3itm1brand12">
                            <td>20</td>
                            <td>ven3</td>
                            <td>itm1</td>
                            <td>brand12</td>
                            <td data-colorId="ven3itm1brand12" data-ven="ven3" data-itm="itm1" data-brand="brand12" data-rate="60"  class="rate">60</td>
                            <td>itm1brand12</td>
                          </tr>
                                                    <tr id="ven3itm1brand13">
                            <td>21</td>
                            <td>ven3</td>
                            <td>itm1</td>
                            <td>brand13</td>
                            <td data-colorId="ven3itm1brand13" data-ven="ven3" data-itm="itm1" data-brand="brand13" data-rate="60"  class="rate">60</td>
                            <td>itm1brand13</td>
                          </tr>
                                                    <tr id="ven3itm2brand21">
                            <td>22</td>
                            <td>ven3</td>
                            <td>itm2</td>
                            <td>brand21</td>
                            <td data-colorId="ven3itm2brand21" data-ven="ven3" data-itm="itm2" data-brand="brand21" data-rate="55"  class="rate">55</td>
                            <td>itm2brand21</td>
                          </tr>
                                                    <tr id="ven3itm2brand22">
                            <td>23</td>
                            <td>ven3</td>
                            <td>itm2</td>
                            <td>brand22</td>
                            <td data-colorId="ven3itm2brand22" data-ven="ven3" data-itm="itm2" data-brand="brand22" data-rate="60"  class="rate">60</td>
                            <td>itm2brand22</td>
                          </tr>
                                                    <tr id="ven3itm2brand23">
                            <td>24</td>
                            <td>ven3</td>
                            <td>itm2</td>
                            <td>brand23</td>
                            <td data-colorId="ven3itm2brand23" data-ven="ven3" data-itm="itm2" data-brand="brand23" data-rate="70"  class="rate">70</td>
                            <td>itm2brand23</td>
                          </tr>
                                                    <tr id="ven3itm3brand31">
                            <td>25</td>
                            <td>ven3</td>
                            <td>itm3</td>
                            <td>brand31</td>
                            <td data-colorId="ven3itm3brand31" data-ven="ven3" data-itm="itm3" data-brand="brand31" data-rate="45"  class="rate">45</td>
                            <td>itm3brand31</td>
                          </tr>
                                                    <tr id="ven3itm3brand32">
                            <td>26</td>
                            <td>ven3</td>
                            <td>itm3</td>
                            <td>brand32</td>
                            <td data-colorId="ven3itm3brand32" data-ven="ven3" data-itm="itm3" data-brand="brand32" data-rate="50"  class="rate">50</td>
                            <td>itm3brand32</td>
                          </tr>
                                                    <tr id="ven3itm3brand33">
                            <td>27</td>
                            <td>ven3</td>
                            <td>itm3</td>
                            <td>brand33</td>
                            <td data-colorId="ven3itm3brand33" data-ven="ven3" data-itm="itm3" data-brand="brand33" data-rate="65"  class="rate">65</td>
                            <td>itm3brand33</td>
                          </tr>
                                                </tbody>
                    </table>
  </body>
</html>
<script type="text/javascript">
  $('document').ready(function(){
    var coloIds = [];
    var items = [];
    $('.rate').each(function(){
      var t=$(this);
      var colorId=t.attr('data-colorId');
      var vendor=t.attr('data-ven');
      var itm=t.attr('data-itm');
      var brand=t.attr('data-brand');
      var rate=t.attr('data-rate');
      var itmCode=itm+brand;
      var item=[];
      item['colorId']=colorId;
      item['vendor']=vendor;
      item['itm']=itm;
      item['brand']=brand;
      item['rate']=rate;
      item['itmCode']=itmCode;
      if(coloIds.length>0){
        var check=1;
        for (var i = coloIds.length - 1; i >= 0; i--) {
          if(coloIds[i]['itmCode']==itmCode){
            if(itmCode=='itm1brand13'){
              console.log(item);
            }
            var check=0;
            if(rate<coloIds[i]['rate']){
              item['color']='green';
              coloIds[i]='';
              coloIds[i]=item;
              coloIds.push(item);
              item='';
            }
            if(coloIds[i]['rate']==rate && coloIds[i]['colorId']!=colorId){
              coloIds[i]['color']='yellow';
              item['color']='yellow';
              coloIds.push(item);
              item='';
            }
          }
        }
        if(check==1){
          item['color']='green';
          coloIds.push(item);
          item='';
        }      
      } else {
        item['color']='green';
        coloIds.push(item);
        item='';
      }
    });
    //console.log(items);
    for (var i = coloIds.length - 1; i >= 0; i--) {
      $('#'+coloIds[i]['colorId']).css("background-color", coloIds[i]['color']);
    }

  });
</script>
Posted by at No comments:
Subscribe to: Comments (Atom)