从外面将td的后背附加到桌子上

Appending td's back into a table from outside

本文关键字：外面 td      更新时间：2023-09-26

我有一个表，它应用了一些java，以将td排列成正确的顺序。不幸的是，它现在已经将这些 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>

我的目标是尝试将各自的 td 放回适当的 js-rowtitleY 中。

我已经尝试了下面的不同变体，只是为了尝试将 td 放回实际表中，但正如您可能知道的那样，我的 jQuery 知识有所欠缺。 

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

有人能指出我大致的方向吗？

谢谢。

如果不访问表和 Tr 元素，您将无法访问 TD 元素。我试图使用querySelectorAll，getElementById，$（[Attribute=value]）访问Td元素，但它不起作用。如果您可以将TD更改为其他元素，例如div，那么我们可以将其恢复对齐。

相关文章：