Faith,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
tr:hover, tr.sel:hover{background-color:#EEE;cursor: pointer}
tr.sel {background-color:#40E0D0;cursor: pointer}
</style>
</head>
<body>
<table id="table" border="1">
<thead>
<tr>
<th>Изображение</th>
<th>Название</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="C:\URL\book.png"></td>
<td>Книга</td>
</tr>
<tr>
<td><img src="C:\URL\clock.png"></td>
<td>Часы</td>
</tr>
<tr>
<td><img src="C:\URL\key.png"></td>
<td>Ключ</td>
</tr>
</tbody>
</table>
<button type="button" onclick="upNdown('up');">↑</button>
<button type="button" onclick="upNdown('down');">↓</button>
<button type="button" onclick="removeSelectedRow();">Удалить</button>
<script>
var tbody = document.getElementById("table").tBodies[0], tr;
tbody.addEventListener('click', function(event) {
var temp = event.target.closest("tr");
if (tr) tr.classList.remove("sel");
if (tr != temp) {
tr = temp;
tr.classList.add("sel")
} else {
tr = null;
}
});
function upNdown(direction) {
if (!tr) return;
direction = direction == 'up' ? -1 : 1;
var rows = [...tbody.rows];
var len = rows.length;
var i = tr.rowIndex - 1;
var index = (i + direction + len) % len;
var temp = rows[index];
rows[index] = tr;
rows[i] = temp;
tbody.append(...rows);
}
function removeSelectedRow() {
tr && (tr.remove(), tr = null);
}
</script>
</body>
</html>