Перемещение спецификаций c tr в специфик c td с javascript - PullRequest
Новая
       2

Перемещение спецификаций c tr в специфик c td с javascript

1 голос
/ 04 марта 2020

Я пытаюсь изменить формат предопределенной таблицы. У меня нет доступа к HTML, только CSS и JS.
По сути, я хочу переместить каждого tr, кроме первого, в первый tr tr с помощью class="field_3".

* 1004. * 
<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: 

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

Но мне нужен способ выбрать их программно в качестве их Идентификатор генерируется однозначно.

После нескольких дней поисков и попыток мне так и не удалось обернуть голову вокруг этого.

Так что любая идея, помогающая решить эту проблему, будет принята с благодарностью.


Редактировать: Добавлен еще один фрагмент с большим количеством строк, что увеличивает сложность решения. 

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

С уважением,
Espen

1 Ответ

1 голос
/ 04 марта 2020

Вы можете попробовать это 

$( 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>

Он будет обрабатывать таблицу любой длины, и если она решит вашу проблему, не забудьте проголосовать и принять ответ

...