skyline33 skyline33 - 3 months ago 9
Javascript Question

Iterate thorugh table columns and get the fastest time

I have a table which has times in order of three splits and the total time it takes.. here in this example http://jsfiddle.net/0x4a2jm3/



#table {
margin: 10px auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 600px;
table-layout: fixed;
text-align: left;
border-collapse: collapse;
}
#table th {
font-size: 15px;
font-weight: normal;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
padding: 8px;
}
#table td {
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
padding: 8px;

<table id="table">
<thead>
<tr>
<th>Lap</th>
<th>Split 1</th>
<th>Split 2</th>
<th>Split 3</th>
<th>Total Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0:30.900</td>
<td>0:51.000</td>
<td>0:32.000</td>
<td>(total time)</td>
</tr>
<tr>
<td>2</td>
<td>0:31.200</td>
<td>0:50.500</td>
<td>0:32.300</td>
<td>(total time)</td>
</tr>
<tr>
<td>3</td>
<td>0:30.600</td>
<td>0:50.900</td>
<td>0:32.200</td>
<td>(total time)</td>
</tr>
</tbody>
</table>





You can see in that table, what I want is to get the fastest time in those columns namely split 1, split 2 and split 3.. example the fastest split 1 time is 0:30.600 split 2 is 0:50.500 and split 3 is 0:32.000 then output it.

js code

$('#table tr').each(function(){
var sp1 = $(this).find('td:nth-child(2)').text()
var sp2 = $(this).find('td:nth-child(3)').text()
var sp3 = $(this).find('td:nth-child(4)').text()
var1 = moment(sp1, "mm:ss.SSS") + moment(sp2, "mm:ss.SSS") + moment(sp3, "mm:ss.SSS")

$(this).find('td:nth-child(5)').html(moment(var1).format("mm:ss.SSS"));
});


so is it possible to do this?

Answer

First of all, it would be great (and it would make your life easier) if you have a class for each kind of split, so you can iterate though them very easily.

The code below does what you want.

$(document).ready(function(){
  var splits = {"split1" : "", "split2" : "", "split3" : ""}, i;

  for (i = 1; i <= 3; i += 1) {
    $(".split" + i).each(function() {
      if (splits["split" + i] === "") {
        splits["split" + i] = $(this).text();
      } else {
        if (splits["split" + i] > $(this).text()) {
          splits["split" + i] = $(this).text();
        }
      }
    });
  }   
      
  alert("split1 = " + splits["split1"] + "\nsplit2 = " + splits["split2"] + "\nsplit3 = " + splits["split3"]);
});   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Lap</th>
      <th>Split 1</th>
      <th>Split 2</th>
      <th>Split 3</th>
      <th>Total Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="split1">0:30.900</td>
      <td class="split2">0:51.000</td>
      <td class="split3">0:32.000</td>
      <td>(total time)</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="split1">0:31.200</td>
      <td class="split2">0:50.500</td>
      <td class="split3">0:32.300</td>
      <td>(total time)</td>
    </tr>
    <tr>
      <td>3</td>
      <td class="split1">0:30.600</td>
      <td class="split2">0:50.900</td>
      <td class="split3">0:32.200</td>
      <td>(total time)</td>
    </tr>
  </tbody>
</table>

So basically you construct an object to store the fastest split. The format of your splits allows you to store them as string and compare them very easily.

Then you iterate over each kind of splits, assigning the value if there wasn't any previous split in the object (empty string), or updating the value if the stored split was slower than the new one.