外側からテーブルにtdを戻す

Question

tdを正しい順序に並べるために、いくつかのJavaが適用されたテーブルがあります。残念ながら、今ではテーブルの外側からそれらのtdをdivに移動しました。

<div id="attributeInputs"> 
    <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">2XL</th> 
     <th class="js-rowtitleX">3XL</th> 
     <th class="js-rowtitleX">4XL</th> 
     <th class="js-rowtitleX">LG</th> 
     <th class="js-rowtitleX">ME</th> 
     <th class="js-rowtitleX">SM</th> 
     <th class="js-rowtitleX">XL</th> 
     <th class="js-rowtitleX">XS</th> 
    </tr> 
    <tr> 
    <th class="js-rowtitleY">Light Stonewash</th> 
    </tr> 
    <tr> 
    <th class="js-rowtitleY">Stonewash</th> 
    </tr> 
    <tr> 
    <th class="js-rowtitleY">White</th> 
    </tr> 
    </tbody> 
    </table> 

    <td class="js-gridBlock js-Low_stock" data-attvalue1="XS" data-attvalue2="White" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox24"><span>Low stock</span></div></div></td> 

    <td class="js-gridBlock js-Low_stock" data-attvalue1="XS" data-attvalue2="Stonewash" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox16"><span>Low stock</span></div></div></td>` 

    <td class="js-gridBlock js-Low_stock" data-attvalue1="XS" data-attvalue2="Light Stonewash" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox8"><span>Low stock</span></div></div></td> 

    <td class="js-gridBlock js-In_stock" data-attvalue1="SM" data-attvalue2="White" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox22"><span>In stock</span></div></div></td> 

    <td class="js-gridBlock js-In_stock" data-attvalue1="SM" data-attvalue2="Light Stonewash" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox6"><span>In stock</span></div></div></td> 

    <td class="js-gridBlock js-In_stock" data-attvalue1="SM" data-attvalue2="Stonewash" id="gridBlock_D14ADA4C-0BB5-11E6-812F-DE885FFE5FF7"><div class="js-gridImage"><div class="prodpageGridText" id="gridtext-gridbox14"><span>In stock</span></div></div></td> 
    </div> 

私の目標は、試してみて、適切なJS-rowtitleYさんへのそれぞれのTDの背中を取得することです。これは、テーブルが現在どのように見えるかを表しています。

私は以下のさまざまなバリエーションを試しましたが、実際のテーブルにtdを戻すようにしようとしていますが、おそらく私のjQueryの知識には少し欠けていると言えるでしょう。

$(document).ready(function() { 
    if ($("#attributeInputs").data('td[data-attvalue2="Black"]')){ 
     $('td[data-attvalue2="White"]').appendTo('.js-grid th'); 
     }; 
}); 

一般的な方向で私を指摘できますか？

ありがとうございます。

Answer 1

テーブル& Tr要素にアクセスすることなくTD要素にアクセスすることはできません。私はquerySelectorAll、getElementById、$（[Attribute = value]）を使ってTd要素へのアクセスを保留しようとしましたが、うまくいきませんでした。 TDをdivのような他の要素に変更することができれば、それを整列に戻すことができます。