将td从外部附加到表中

时间:2016-04-28 11:00:31

标签: javascript jquery html dom append

我有一个表已经应用了一些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 个答案:

答案 0 :(得分:0)

如果没有表格和附件,您将无法访问TD元素Tr元素。我尝试使用querySelectorAll,getElementById,$([Attribute = value])来访问Td元素它不起作用。如果你可以将TD更改为div之类的其他元素,那么我们可以将其恢复到对齐状态。