2016-08-02 58 views
2

我試圖重新排序一個數值在錯誤的地方,但它的位置不能修改傳統的HTML表。單獨在一行上運行jQuery函數

我已經運行這個腳本來嘗試重新排序td的,但是我遇到了問題,其中的大小重新排序好,但我們得到兩個行的複製到一個例如大小會去8, 8,10,10,12,12等

我試過運行各種不同的每個循環,沒有運氣。任何人都可以給我一個提示嗎?

下面是表格式,下面就是我一直在使用,試圖重新排序的代碼中的取出每個迴路因爲它不是爲我工作..

<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;} 
+0

您是否嘗試過通過'th'元素尋找使用。每(),並在陣列中存儲的值,然後排數組和循環數組加回? – AdamMcquiff

回答

2

問題是因爲你追加的選擇器中有兩個元素,因此元素被複制。要解決這個問題,你應該遍歷tr元素,並在這些元素中對td進行排序。試試這個:

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

Working example

+0

謝謝你Rory!我知道這會很簡單。 – NatsWhiskas