从外部将 td 附加到表中

Posted 2023-05-09

【中文标题】从外部将 td 附加到表中

【英文标题】：Appending td's back into a table from outside

【发布时间】：2016-08-23 02:26:59

【问题描述】：

我有一个表，它应用了一些 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');
        ;
); 

谁能给我指出大致的方向？

谢谢。

【参考方案1】：

如果不访问 table 和 Tr 元素，您将无法访问 TD 元素。我尝试使用 querySelectorAll、getElementById、$([Attribute=value]) 来获取访问 Td 元素的权限，但它不起作用。如果您可以将 TD 更改为 div 之类的其他元素，那么我们可以将其重新对齐。