Including an array of jquery objects in html

Question

I have an array of objects, these <tr> objects with child <td> , etc. How can I put objects in dom, replacing what was before my methods?

 <table id="trg"> <tbody> <tr class="trg-quantity-head"> <th class="trg-quantity quantity-head">Quantity</th> <th class="trg-quantity">0-10</th> <th class="trg-quantity">11+</th> <th class="trg-quantity">100+</th> <th class="trg-quantity">250+</th> </tr> <tr class="trg-variations"> <td class="trg-variation">1″</td> <td class="trg-price trg-price-base">$0.02</td> <td class="trg-price trg-price-table">$0.01</td> <td class="trg-price trg-price-table">$14.94</td> <td class="trg-price trg-price-table">$14.18</td> </tr> <tr class="trg-variations"> <td class="trg-variation">1-1/2"</td> <td class="trg-price trg-price-base">$33.27</td> <td class="trg-price trg-price-table">$28.02</td> <td class="trg-price trg-price-table">$27.00</td> <td class="trg-price trg-price-table">$29.03</td> </tr> <tr class="trg-variations"> <td class="trg-variation">1-1/4"</td> <td class="trg-price trg-price-base">$25.72</td> <td class="trg-price trg-price-table">$21.57</td> <td class="trg-price trg-price-table">$20.66</td> <td class="trg-price trg-price-table">$19.70</td> </tr> <tr class="trg-variations"> <td class="trg-variation">1-3/4"</td> <td class="trg-price trg-price-base">$48.91</td> <td class="trg-price trg-price-table">$43.91</td> <td class="trg-price trg-price-table">$42.21</td> <td class="trg-price trg-price-table">$40.36</td> </tr> <tr class="trg-variations"> <td class="trg-variation">1/2″</td> <td class="trg-price trg-price-base">$9.87</td> <td class="trg-price trg-price-table">$6.32</td> <td class="trg-price trg-price-table">$5.83</td> <td class="trg-price trg-price-table">$5.38</td> </tr> <tr class="trg-variations"> <td class="trg-variation">2"</td> <td class="trg-price trg-price-base">$58.88</td> <td class="trg-price trg-price-table">$53.88</td> <td class="trg-price trg-price-table">$51.16</td> <td class="trg-price trg-price-table">$49.50</td> </tr> <tr class="trg-variations"> <td class="trg-variation">3/4″</td> <td class="trg-price trg-price-base">$15.27</td> <td class="trg-price trg-price-table">$10.65</td> <td class="trg-price trg-price-table">$10.24</td> <td class="trg-price trg-price-table">$9.52</td> </tr> <tr class="trg-variations"> <td class="trg-variation">3/8″</td> <td class="trg-price trg-price-base">$8.52</td> <td class="trg-price trg-price-table">$5.44</td> <td class="trg-price trg-price-table">$4.54</td> <td class="trg-price trg-price-table">$4.16</td> </tr> <tr class="trg-variations"> <td class="trg-variation">5/8″</td> <td class="trg-price trg-price-base">$11.43</td> <td class="trg-price trg-price-table">$7.80</td> <td class="trg-price trg-price-table">$7.35</td> <td class="trg-price trg-price-table">$6.85</td> </tr> </tbody> </table> 

Here is the js I used to run and sort this table: http://jsfiddle.net/uxRmr/1/

Answer 1

Realized version of the script by David Ferog.

---

Refactored Fiddle

 function sortByRationalValue (a,b){ return a.rationalValue - b.rationalValue; } function returnObjectFromMeasurements(element, text) { var obj = {}, range = text.replace(/["'"″]/g, '').split('-'), rational; if (range.length > 1) rational = eval(range[0]) + eval(range[1]); else rational = eval(range[0]); obj.rationalValue = rational; obj.element = element; return obj; } (function run(){ var tableVars = [], tableElements = []; var $tr = $("table#trg tr.trg-variations"); $tr.each(function (index) { var $this = $(this); tableVars[index] = returnObjectFromMeasurements(this, $this.children('td').first().text() ); }); tableVars.sort(sortByRationalValue); $.each(tableVars, function (index, value) { tableElements[index] = value.element; }); $('#trg tbody').html(tableElements).find('tr:odd').addClass('odd'); }());