Перемещение строки из одной таблицы в другую JS

222

13 декабря 2017, 22:01

Здравствуйте. Помогите пожалуйста решить задачку. Есть таблица на странице index.html. При нажатии на кнопку Delete в конкретной строке - эта строка должна удалиться из таблицы и попасть в таблицу на страницу deleted.html. Нужно обойтись чистым JS на стороне браузера. Отображать данные в таблицах на другом ПК или в другом браузере задача не стоит. По моему мнению, можно попробовать активную строку таблицы поместить в localstorage, а потом ее оттуда забирать в другую таблицу, это было бы хорошим вариантом для меня. Как реализовать - хз. Или перекраивать логику и сделать переключение страниц в виде вкладок через параметр display. Но с этим тоже надо разбираться, я же новичок. P.S. если вам не сложно, постарайтесь рассказать немного поподробнее, чтобы не заниматься тупо копипастой. Спасибо!

index.html и функция на кнопке Add:

        function insertRow(id) { 
            var tbody = document.getElementById(id).getElementsByTagName("tbody")[0]; 
            var row; 
            row = document.createElement("tr"); 
            row.setAttribute("id", "tr_id") 
            var cellCounter = document.getElementById("myTable").rows.length; 
            var td1 = document.createElement("td"); 
            td1.appendChild(document.createTextNode(cellCounter)); 
            var td2 = document.createElement("td"); 
            var checkbox = document.createElement("input") 
            checkbox.setAttribute("type", "checkbox"); 
            checkbox.setAttribute("id", "checkbox_id"); 
            td2.appendChild(checkbox); 
            var td3 = document.createElement("td"); 
            td3.appendChild(document.createTextNode(document.getElementById("add_id").value)); 
            var td4 = document.createElement("td"); 
            td4.appendChild(document.createTextNode(document.getElementById("quant_id").value)); 
            var td5 = document.createElement("td"); 
            td5.appendChild(document.createTextNode(document.getElementById("price_id").value)); 
            var td6 = document.createElement("td"); 
            var editButton = document.createElement("input") 
            editButton.setAttribute("type", "button"); 
            editButton.setAttribute("value", "Edit"); 
            td6.appendChild(editButton); 
            var deleteButton = document.createElement("input") 
            deleteButton.setAttribute("type", "button"); 
            deleteButton.setAttribute("value", "Delete"); 
            td6.appendChild(deleteButton); 
            td6.setAttribute("colspan", "2") 
            row.appendChild(td1); 
            row.appendChild(td2); 
            row.appendChild(td3); 
            row.appendChild(td4); 
            row.appendChild(td5); 
            row.appendChild(td6); 
             
            tbody.appendChild(row); 
        }

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="css/main.css" rel="stylesheet"> 
    <title>Cart</title> 
</head> 
 
<body> 
    <div class="menu"> 
        <ul class="list"> 
            <li><a href="index.html">Shopping list</a></li> 
            <li><a href="done.html">Done</a></li> 
            <li><a href="deleted.html">Deleted</a></li> 
        </ul> 
    </div> 
    <div class="main"> 
        <h1 class="h1">Shopping List</h1> 
        <hr class="hr"> 
        <input type="text" id="add_id" placeholder="Add items ti you Shopping List"> 
        <input type="text" id="quant_id" placeholder="Quant."> 
        <input type="text" id="price_id" placeholder="Price"> 
        <button type="button" onclick="insertRow('myTable');return false;">Add</button> 
    </div> 
    <div class="table"> 
        <table id="myTable" cellspacing="0" border="1"> 
            <tbody> 
                <tr> 
                    <td>#</td> 
                    <td>Done</td> 
                    <td>Item</td> 
                    <td>Quantity</td> 
                    <td>Price $</td> 
                    <td colspan="2" align="center" width="100">Action</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
 
</body> 
<script src="js/insertRow.js"></script> 
</html>

deleted.html:

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <link href="css/main.css" rel="stylesheet"> 
    <title>Cart</title> 
</head> 
 
<body> 
    <div class="menu"> 
        <ul class="list"> 
            <li><a href="index.html">Shopping list</a></li> 
            <li><a href="done.html">Done</a></li> 
            <li><a href="deleted.html">Deleted</a></li> 
        </ul> 
    </div> 
    <div class="main"> 
        <h1 class="h1">Deleted Items</h1> 
 
    </div> 
    <div class="table"> 
        <table id="myTable" cellspacing="0" border="1"> 
            <tbody> 
                <tr onclick="alert(this.rowIndex)"> 
                    <td>#</td> 
                    <td>Done</td> 
                    <td>Item</td> 
                    <td>Quantity</td> 
                    <td>Price $</td> 
                    <td colspan="2" align="center" width="100">Action</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
 
</body> 
 
</html>

Answer 1

Основная трудность - хранить данные. Если у вас две разные страницы html, нужно как-то переносить между ними данные. Варианты:

В параметрах GET (в адресной строке браузера) - плохо, есть ограничение на размер, при больших размерах таблицы будет огромная ссылка. Но в целом выполнимо
Через серверную сторону (БД, сессия сервера или еще как-то) - нельзя, нужно использовать чистый JS на стороне браузера, судя по формулировке вопроса
Через куки браузера - странно, данные будут работать только в конкретном браузере. При открытии страниц в другом браузере или на другом ПК - данные не будут сохранены, потому что хранятся в браузере

Получается, что имея только чистый JS (а он работает на стороне браузера), нельзя перенести данные от одной страницы к другой. Потому что при открытии другой страницы весь JS на этой странице умирает. А JS для новой страницы - рождается. Между ними нужен "мост" - обычно это серверная часть как раз, backend

Если бы у вас была серверная часть хотя бы в каком-то виде, которой можно было бы сказать - "создай строку / дай строку / обнови строку / удали строку" (CRUD - https://ru.wikipedia.org/wiki/CRUD), то задача решалась бы элементарно. Но на чистом JS на стороне браузера это скорее головоломка, чем задача.

Смиритесь с этим или дополните вопрос подробностями или деталями.