Turning an array of jquery objects into html

Question

I have an array of objects, these objects being <tr>'s with children <td>'s, etc. How can I put the objects into the dom, replacing what they were 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 have used to run through and sort this table: http://jsfiddle.net/uxRmr/1/

It looks like you are trying to sort a column, have you considered using datatables.net — vol7ron
– vol7ron, Commented Feb 15, 2013 at 17:54
@vol7ron - I'm just trying to sort the table (but not leave it sort-able) so that the elements are in order of their decimal value - they come in as fractions, but have different kinds of notations, e.g. '', ", etc. I have no control over how the data is coming in, just the ability to sort it. — Josh Levinson
– Josh Levinson, Commented Feb 15, 2013 at 18:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Refactored version of David Ferogi's Fiddle.

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');

}());

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 15, 2013 at 18:23

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Levinson Over a year ago

what code suggestions can you make for optimization/code prettiness?

vol7ron Over a year ago

I think you can combine the sorting in a better manner, but I didn't want to completely change the code. So see above for edits.

Josh Levinson Over a year ago

I appreciate your help very much!

Collectives™ on Stack Overflow

Turning an array of jquery objects into html

1 Answer 1

Refactored Fiddle

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related