CODEWITHSUNDEEP
jqueryforeachhtml-table
NatsWhiskas
NatsWhiskas

Reputation: 35

Running a jQuery function on a row individually

I'm attempting to re-order a html table where one numerical value is in the wrong place but it's position can't be amended conventionally.

I have run this script to try and re-order the td's however I'm running into the issue where the sizes are re-ordering ok but we're getting both row's duplicating onto one e.g the sizing would go 8,8,10,10,12,12 etc.

I've tried running various different each loops with no luck. Would anyone be able to give me a hint please?

Below is the table format and below that is the code I've been using to try and re-order with the for each loop taken out as it wasn't working for me..

<div id="attributeInputs" class="attribute-inputs js-type-grid">
    <table class="js-grid">
    <thead>
        <tr>
            <th class="js-col1"></th> 
            <th class="js-col2" colspan="8"></th>
        </tr>
       </thead>
       <tbody><tr><th rowspan="1"></th>
       <th class="js-rowtitleX">10</th>
       <th class="js-rowtitleX">12</th>
       <th class="js-rowtitleX">14</th>
       <th class="js-rowtitleX">16</th>
       <th class="js-rowtitleX">18</th>
       <th class="js-rowtitleX">20</th>
       <th class="js-rowtitleX">22</th>
       <th class="js-rowtitleX">8</th>
      </tr>
    <tr>
    <th class="js-rowtitleY">Red</th>
   <td class="js-gridBlock js-In_stock" data-attvalue1="10" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="12" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="14" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="16" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="18" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="20" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="22" data-attvalue2="Red" <span class="status">In stock</span></td>
    <td class="js-gridBlock js-In_stock" data-attvalue1="8" data-attvalue2="Red" <span class="status">In stock</span></td>

</tr>
<tr>
<th class="js-rowtitleY">Blue</th>
<td class="js-gridBlock js-In_stock" data-attvalue1="10" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="12" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="14" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="16" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="18" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="20" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="22" data-attvalue2="Blue" <span class="status">In stock</span></td>
<td class="js-gridBlock js-In_stock" data-attvalue1="8" data-attvalue2="Blue" <span class="status">In stock</span></td>
</tr>
</tbody
</table>
</div>

$("#attributeInputs > table > tbody > tr > td").sort(sort_td).appendTo('#attributeInputs > table > tbody > tr:nth-child(n+2)');
    function sort_td(a, b){
                    return ($(b).data('attvalue1')) < ($(a).data('attvalue1')) ? 1 : -1;}

Upvotes: 2

Views: 43

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

The problem is because the selector you append to has two elements in it, hence the elements are duplicated. To fix this you should loop over the tr elements and sort the td within those individually. Try this:

$("#attributeInputs > table > tbody > tr").each(function() {
    $(this).find('td').sort(sort_td).appendTo(this);
})

Working example

Upvotes: 2

Related Questions