Здравствуйте. Нужна помощь с настройкой кнопок. Задача следующая:"Расположить в окне браузера в вертикальный ряд список товаров, включающих пиктограмму и название. Создать кнопки «вверх» и «вниз», позволяющими переместить выбранный элемент на 1 позицию выше или ниже в списке, а также кнопку «удалить», при нажатии на которую элемент удаляется из списка". Вот, что у меня получилось:
<!DOCTYPE html>
<html>
<head>
<style>
tr:hover{background-color:#EEE;cursor: pointer}
</style>
</head>
<body>
<table id="table" border="1">
<tr>
<th>Изображение</th>
<th>Название</th>
</tr>
<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>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
<button onclick="removeSelectedRow();">Удалить</button>
<script>
var index = 1;
function getSelectedRow()
{
var table = document.getElementById("table");
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
if(typeof index !== "undefined"){
table.rows[index].classList.toggle("selected");
}
index = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction)
{
var rows = document.getElementById("table").rows,
parent = rows[index].parentNode;
if(direction === "up")
{
if(index > 1){
parent.insertBefore(rows[index],rows[index - 1]);
index--;
}
}
if(direction === "down")
{
if(index < rows.length -1){
parent.insertBefore(rows[index + 1],rows[index]);
index++;
}
}
}
function selectedRowToInput()
{
for(var index = 1;
index < table.rows.length; i++)
{
table.rows[index].onclick = function()
{
rIndex = this.rowIndex;
};
}
}
selectedRowToInput();
function removeSelectedRow()
{
table.deleteRow(rIndex);
}
</script>
</body>
</html>
В результате выходит, что одна часть кода мешает работе другой. Если в функции selectedRowToInput в место index поставить i, то будет корректно работать только эта функция(удаление), если всё оставить так, то будут работать корректно только кнопки «вверх» и «вниз». А также хотелось бы чтоб «удаление» было под функцией upNdown, вместе с «вверх» и «вниз», а не отдельно в selectedRowToInput.
Каким образом надо исправить код, чтобы всё это осуществить?