Корректно не работает кнопка удаления строки таблицы
Здравствуйте. Нужна помощь с настройкой кнопок. Задача следующая:"Расположить в окне браузера в вертикальный ряд список товаров, включающих пиктограмму и название. Создать кнопки «вверх» и «вниз», позволяющими переместить выбранный элемент на 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. Каким образом надо исправить код, чтобы всё это осуществить? |
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>
|
| Часовой пояс GMT +3, время: 13:53. |