使用 javascript 将特定的 tr 移动到特定的 td

Question

我正在尝试更改预定义表格的格式。 我无法访问 HTML，只有 CSS 和 JS。
基本上我想要的是用class="field_3"将除第一个之外的每个 tr 移动到第一个 tr 的 td 中。

 <table style="border: 1px solid black;"> <tbody > <tr id="unique_id_1"> <td class="field_1"><span class="col-1">Item</span></td> <td class="field_2">No 1</td> <td class="field_3"></td> </tr> <tr id="unique_id_2"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 1</td> </tr> <tr id="unique_id_3"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 2</td> </tr> <tr id="unique_id_4"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 3</td> </tr> </tbody> </table>

我已经设法通过直接定位 tr 的 id 来制作一个工作脚本：

var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);

但是我需要一种方法来以编程方式选择它们，因为它们的 id 是唯一生成的。

经过几天的搜索和尝试后，我还没有设法解决这个问题。

因此，任何有助于解决此问题的见解将不胜感激。

编辑：添加了更多行的另一个片段，这增加了解决方案的复杂性。

 <table style="border: 1px solid black;"> <tbody > <tr class="group"> <td></td> </tr> <tr id="unique_id_1"> <td class="field_1"><span class="col-1">Item</span></td> <td class="field_2">No 1</td> <td class="field_3"></td> </tr> <tr id="unique_id_2"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 1</td> </tr> <tr id="unique_id_3"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 2</td> </tr> <tr id="unique_id_4"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 3</td> </tr> <tr class="group"> <td></td> </tr> <tr id="unique_id_5"> <td class="field_1"><span class="col-1">Item</span></td> <td class="field_2">No 2</td> <td class="field_3"></td> </tr> <tr id="unique_id_6"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 1</td> </tr> <tr id="unique_id_7"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 2</td> </tr> <tr id="unique_id_8"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 3</td> </tr> </tbody> </table>

问候，
埃斯彭

Answer 1

你可以试试这个

 $( document ).ready(function() { var firstTr = $("tr:first-child").attr("id"); var rows =$("#"+firstTr ).nextAll(); $("tr:first-child td:last-child").append(rows); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table style="border: 1px solid black;"> <tbody > <tr id="unique_id_1"> <td class="field_1"><span class="col-1">Item</span></td> <td class="field_2">No 1</td> <td class="field_3"></td> </tr> <tr id="unique_id_2"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 1</td> </tr> <tr id="unique_id_3"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 2</td> </tr> <tr id="unique_id_4"> <td class="field_1"></td> <td class="field_2"></td> <td class="field_3">Action 3</td> </tr> </tbody> </table>

它将处理任何长度的表格，如果它解决了您的问题，请不要忘记投票并接受答案