NatsWhiskas NatsWhiskas - 4 months ago 7
jQuery Question

Running a jQuery function on a row individually

Im 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;}

Answer

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