使用 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>

它將處理任何長度的表格，如果它解決了您的問題，請不要忘記投票並接受答案