Редактируемая таблица на чистом js

333

15 ноября 2021, 05:00

Всем добрый день. Делаю динамическую таблицу, с подгрузкой данных из jsone. Таблица должна быть редактируемая, сверстать сверстал, добавил фильтр, сделал модальное окно, но не могу понять (найти подходящий пример) реализации редактирования строчки таблицы, через всплывающее модальное окно. Редактирование происходит в инпутах.

//script код
//Checked All Checkbox
function do_all(source){
    for(i=0;i<10000;i++){
        document.getElementById('sb'+(i+1)).checked=source.checked;
    }
}
function do_one(source){
    if(!source.checked){
        document.getElementById('form1').checked=false;
    }else{
        set_checked=true;
        for(i=0;i<4;i++){
            if(!document.getElementById('sb'+(i+1)).checked){   
            set_checked=false;
            break;
            }
        }
        if(set_checked){
            document.getElementById('form1').checked=true;
        }
    }
}
ф
////////////////////////////////////
function tableSearch() {
    var phrase = document.getElementById('search-text');
    var table = document.getElementById('info-table');
    var regPhrase = new RegExp(phrase.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }
    }
}
////////////////////////////////////
//Open/close modal menu
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var btnClose = document.getElementById("btnClose");
btn.onclick = function(){
    modal.style.display = "block";
}
btnClose.onclick = function(){
    modal.style.display = "none";
}
window.onclick = function(event){
    if (event.target == modal){
      modal.style.display = "none";
    }
}
////////////////////////////////////
//Remove button
////////////////////////////////////
document.addEventListener("DOMContentLoaded", function() {
    var node = document.querySelector('.table');
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            var responseJson = JSON.parse(this.responseText);
            for(var i = 0; i < responseJson.length; i++){
                var checkBox = '<input name="sb[]" type="checkbox" value="1" onclick="do_one(this);">';
                var penEdit = '<button class="table-icon"><img src="assets/pen.svg" alt="editor button"></button>';
                var btnRemove = '<button class="table-icon"><img src="assets/close.svg" alt="close button" value="remove"></button> ';
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + checkBox + '</td>' + '<td>' + responseJson[i].name + '</td>' + '<td>' + responseJson[i].company + '</td>'
                + '<td>' + responseJson[i].address + '</td>' + '<td>' + responseJson[i].city + '</td>' + '<td>' + responseJson[i].country + '</td>'
                + '<td>' + penEdit + '</td>' + '<td>' + btnRemove + '</td>';
                node.appendChild(tr);
            }
        }else{
            alert("Server is currently not available");
        }
    };
    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();
});

и код html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style/style.css">
    <title>Table Clients</title>
</head>
<body>
    <header>
        <section class="wrap-header content-width">
            <div class="logo-wrap">
                <img src="assets/logo.svg" alt="logo" class="logo-svg">
            </div>
            <div class="header-text">
                <div class="header-text-title">Welcome, user</div>
                <div class="vertical-line"></div>
                <div class="header-text-title">Log out</div>
            </div>
        </section>
    </header>
    <main>
        <div class="main-wrap content-width">
            <div class="customer-container">
                <div class="customer-container-logo"><img src="assets/users.svg" alt="" class="logo-main"></div>
                <div class="customer-container-title">Customer</div>
            </div>
            <div class="filter-container content-width">
                    <div class="filter-container-title">Filters</div>
                    <div class="wrap-input-btn">
                        <div class="input-wrap-btn">
                            <input type="text" class="input-add" placeholder="Company Name, Name, Country, City" id="search-text"  onkeyup="tableSearch()">  
                        </div>
                        <button class="add-btn-old" id="myBtn">
                            <svg class="add-btn">
                                <use xlink:href="#add-btn"></use>
                            </svg>
                        </button>
                        <!--Modal Menu-->
                        <div  id="myModal" class="modal">
                            <section class="modal-wrap">
                                <div class="container-modal">
                                    <div class="input-modal">
                                        <input type="text" class="input-add" name="name" placeholder="Company Name">
                                        <input type="text" class="input-add" name="company" placeholder="Contact name">
                                        <input type="text" class="input-add" name="address" placeholder="Adress">
                                        <input type="text" class="input-add" name="city" placeholder="City">
                                        <input type="text" class="input-add" name="country" placeholder="Country"> 
                                    </div>
                                    <div class="wrap-btn">
                                        <button class="modal-btn-add" id="btnAdd" value="Submit" onclick="save()">Add edit</button>
                                        <button class="modal-btn-close" id="btnClose">X</button>  
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            <div class="underline"></div>    
            <table class="table" id="info-table">
                <form action="" id="form1">
                    <tbody>
                            <tr>
                                <th>
                                    <input name="main" type="checkbox" value="ok" id="main" class="all-cheked" onclick="do_all(this);">
                                </th>
                                <th>Company name</th>
                                <th>Contact name</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>Country</th>
                                <th><img src="assets/pen.svg" alt="" class="table-icon" style="display: none;"></th>
                                <th><button class="table-icon remove-btn"><img src="assets/close.svg" alt="close button" value="remove"></button></th>
                            </tr>
                            <tr id="company-line-1">
                                <td id="check-line">
                                    <input name="sb[]" type="checkbox" value="1" id='sb1' onclick="do_one(this);">
                                </td>
                                <td>Magnifico LTD.</td>
                                <td>John Doe</td>
                                <td>5 ave. street</td>
                                <td>Kremenchug</td>
                                <td>Ukraine</td>
                                <td><button class="table-icon"><img src="assets/pen.svg" alt="editor button"></button></td>
                                <td><button class="table-icon"><img src="assets/close.svg" alt="close button" value="remove"></button></td>
                            </tr>
                    </tbody>
                </form>    
            </table>
        </div>
    </main>
<!----------------------------------------------->
<!----------------------------------------------->
<!----------------------------------------------->    
<svg style="display: none;">
    <symbol id="add-btn" viewBox="0 0 25 25">
        <path class="st0" d="M12.5,0.4C5.8,0.4,0.4,5.8,0.4,12.5s5.4,12.1,12.1,12.1s12.1-5.4,12.1-12.1S19.2,0.4,12.5,0.4z M17,13h-4v4
        c0,0.3-0.2,0.5-0.5,0.5S12,17.3,12,17v-4H8c-0.3,0-0.5-0.2-0.5-0.5S7.7,12,8,12h4V8c0-0.3,0.2-0.5,0.5-0.5S13,7.7,13,8v4h4
        c0.3,0,0.5,0.2,0.5,0.5S17.3,13,17,13z"/>
</svg>
<script src="script/script.js"></script>
</body>
</html>

Сама таблица не для комерции. Изучаю на курсах, и вот столкнулся, с тем что не понимаю как реализовать. Ещо возможно кто сталкивался, делаю также чекбоксы, и надо сделать чтобы был один главный чекбокс выделяющий все остальные. Получилось реализовать такую возможность, но она работает только с кодом который добавляется ручками в html.

На данный момент реализована функция вывода модального окна, но в нем нету информации из ячеек таблицы. Необходимо сделать возможность открытия модального окна, с возможностью редактировать содержимое строки таблицы, и с последующим сохранением, но в пределах браузера.

Прилагаю фото, как это вообще выглядит в макете

Answer 1

Держи https://datatables.net/ и не мучайся пожалуйста, это тебе сэкономит кучу времени, там уже все сделано что тебе нужно, а чего нет, то легко туда дописывается.