Td's zurück in eine Tabelle von außen anfügen

Question

Ich habe eine Tabelle, die etwas Java angewendet hatte, um die Tds in die richtige Reihenfolge zu bringen. Leider hat es jetzt diese tds von außerhalb des Tisches in ein div verschoben. Dies ist repräsentativ dafür, wie die Tabelle sieht jetzt:

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

Mein Ziel ist die jeweilige td zurück in die entsprechenden js-rowtitleY ist zu versuchen und zu erhalten.

Ich habe verschiedene Variationen der unten versucht, nur um zu versuchen, die tds zurück in die tatsächliche Tabelle zu bekommen, aber wie Sie wahrscheinlich sagen können, meine jQuery Wissen fehlt ein bisschen.

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

Würde jemand mich in die allgemeine Richtung zeigen können?

Vielen Dank.

Answer 1

Sie können nicht auf das TD-Element zugreifen, ohne Zugriff auf die Tabelle & Tr-Elemente zu haben. Ich habe versucht, den Zugriff auf Td-Element mit QuerySelectorAll, GetElementById, $ ([Attribut = Wert]) zu erhalten, es hat nicht funktioniert. Wenn Sie TD in ein anderes Element wie Div ändern können, können wir es wieder in die Ausrichtung bringen.