Мне просто интересно переместить выбранную строку в верхнюю часть таблицы, когда флажок установлен
единственное, чего я добился, это перемещениефлажок в верхней части таблицы, но когда я снял флажки, они остались вверху
это код только в одном файле, код javascript находится в самом низу файла
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Row Up And Down</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
#table {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#table tr {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
thead tr th {
background-color: #66e9ff;
font-size: 20px;
border: 2px solid black;
border-collapse: collapse;
}
tbody td {
min-width: 100px;
border: 1px solid black;
}
tbody td:first-child {
text-align: center;
}
tbody tr.checked td {
background-color: #ffbbbb;
color: dark;
}
tbody tr:hover {
background-color: yellow;
}
#feedback {
font-size: 1.4em;
}
table .ui-selecting {
background: #FECA40;
}
table .ui-selected {
background: #928bff;
color: white;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Table">
<thead>
<tr>
<th><input type="checkbox" class="check_all" value="Check All"></th>
<th>Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Label 1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Label 2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Label 3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Label 4</td>
</tr>
</tbody>
</table>
<button>↑</button>
<button>↓</button>
<script>
$(function() {
function setCheck(o, c) {
o.prop("checked", c);
if (c) {
//The closest() method returns the first ancestor of the selected element.
o.closest("tr").addClass("checked");
} else {
o.closest("tr").removeClass("checked");
}
}
$("tbody tr").on("click", function(e) {
var chk = $("[type='checkbox']", this);
setCheck(chk, !$(this).hasClass("checked"));
//moved the checkboxes to the top------------------------
// var $tbody = $("table");
// $tbody.prepend( $tbody.find(chk) );
});
});
</script>
</body>
</ht
ml>