动态关闭和打开表行

Question

我在我的网站上有一个表格，其中包含不同产品的选项。不是我放的，是电商平台放的。它在表中的一行中列出了选项。表格如下所示：

<div class="attributes">
    <table>
        <tbody>
            <tr>
                <td>Size:</td>
                <td>&nbsp;</td>
                <td><select><option>Sizes here</option></select></td>
            </tr>
        </tbody>
    </table>
</div>

那么，如果有另一个选项，它将位于另一个具有相同标记的行中。

这将在<select>框的前面渲染标签(在本例中为size)。我想要<select>盒子上面的标签，我想最简单的方法就是关闭<tr>并打开一个新的。你有什么建议吗？

编辑:我应该提一下，电子商务平台生成html，我没有访问源代码的权限。

Answer 1

假设它遵循这个确切的结构，试试这个：

$(".attributes select").each(function(){
    $label = $(this).parent().prev().prev();
    $label.parent().before("<tr></tr>");
    $label.parent().prev().append($label.clone());
    $label.remove();
    $(this).parent().prev().remove();
});

下面是一个例子：Demo

Answer 2

像这样吗？

<div class="attributes">
    <table>
        <tbody>
            <tr>
                <td>Size:</td>
            </tr>
            <tr>
                <td><select><option>Sizes here</option></select></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 3

我认为你必须分两步来做：

1. 删除元素：

$('.attributes').find('tr:first-child').remove()；$('.attributes').find('tr:first-child').remove()；

2.将它们追加回原来的位置

$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');