<table width="200" border="1">
<tr class="tr_room_id1">
<td colspan="2">Комната 1
<button class="up_room" data-direction="up" data-classroom="tr_room_id1">Up</button>
<button class="down_room" data-direction="down" data-classroom="tr_room_id1">Down</button>
</td>
</tr>
<tr class="tr_room_id1">
<td>1</td>
<td>1</td>
</tr>
<tr class="tr_room_id1">
<td>1</td>
<td>1</td>
</tr>
<td colspan="2" class="tr_room_id2">Комната 2
<button class="up_room" data-direction="up" data-classroom="tr_room_id2">Up</button>
<button class="down_room" data-direction="down" data-classroom="tr_room_id2">Down</button>
</td>
</tr>
<tr class="tr_room_id2">
<td>2</td>
<td>2</td>
</tr>
<tr class="tr_room_id2">
<td>2</td>
<td>2</td>
</tr>
<tr class="tr_room_id2">
<td>2</td>
<td>2</td>
</tr>
<tr class="tr_room_id3">
<td colspan="2">Комната 3
<button class="up_room" data-direction="up" data-classroom="tr_room_id3">Up</button>
<button class="down_room" data-direction="down" data-classroom="tr_room_id3">Down</button>
</td>
</tr>
<tr class="tr_room_id3">
<td>3</td>
<td>3</td>
</tr>
<tr class="tr_room_id3">
<td>3</td>
<td>3</td>
</tr>
<tr class="tr_room_id3">
<td>3</td>
<td>3</td>
</tr>
<tr class="tr_room_id4">
<td colspan="2">Комната 4
<button class="up_room" data-direction="up" data-classroom="tr_room_id4">Up</button>
<button class="down_room" data-direction="down" data-classroom="tr_room_id4">Down</button>
</td>
</tr>
<tr class="tr_room_id4">
<td>4</td>
<td>4</td>
</tr>
<tr class="tr_room_id4">
<td>4</td>
<td>4</td>
</tr>
</table>
$(".up_room, .down_room").click(function() {
var direction = $(this).data("direction");
var classroom = $(this).data("classroom");
$("." + classroom).each(function() {
var row = $(this).closest("tr");
var checked_length = $("." + classroom).length;
if (direction == "up") {
for (i = 0; i <= checked_length; i++) {
row.insertBefore(row.prev());
}
}
if (direction == "down") {
for (i = 0; i <= checked_length; i++) {
row.insertAfter(row.next());
}
}
});
});
This Pen doesn't use any external CSS resources.