将 jquery 对象数组转换为 html

Question

我有一个对象数组，这些对象是 <tr> 和孩子 <td> 等。 如何将对象放入 dom 中，替换它们之前的方法？

<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>

这是我用来运行和排序这个表的js： http://jsfiddle.net/uxRmr/1/

Answer 1

David Ferogi 的小提琴的重构版本。

---

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

}());