@Anna123456789

Как обратиться к определенной строке в таблице на языке JS и перенести из массив в массив?

Здравствуйте. Есть типо Todo List
так вот. мы добавляем задачи. после добавления они пушатся в массив cur. Но после нажатия на кнопку с галочкой, эта строка должна перейти в массив done.
У меня не получается разобраться именно с этим вопросов. Сейчас по нажатию на кнопку переносится все ,что есть из cur в done
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
          integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

</head>
<body>

<div class="main">
    <button class="btn active">TASKS</button>
    <button class="btn">DONE</button>
    <button class="btn">REMOVE</button>

    <div class="content active">
        <div class="window">
            <table cellpadding="2" border="2" cellspacing="0">
                <tbody class="table">

                </tbody>
            </table>

            <button class="add">
                <i class="fas fa-plus"></i>
            </button>
            <div class="modal">

                <div class="popap">
                    <div class="popap-head">
                        <div class="close">X</div>
                    </div>
                    <div class="popap-main">
                        <form class="popap-form">
                            <label>
                                <span>Name</span>
                                <input type="text" class="create-task" name="taskName"/>
                            </label>
                            <label>
                                <span>Description</span>
                                <textarea class="create-task" name="taskDesc"></textarea>
                            </label>
                            <label>
                                <select class="create-task" name="taskPriority">
                                    <option value="low">низкий</option>
                                    <option value="normal">средний</option>
                                    <option value="high">высокий</option>
                                </select>
                            </label>

                        </form>
                        <div class="popap-btn">

                            <div class="btn-ok">ok</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="window">2</div>
    </div>
    <div class="content">
        <div class="window">3</div>
    </div>
</div>
<script src="js.js"></script>
</body>
</html>


JS

let tasks = {
    cur: [],
    done: [],
    removed: []
};
let btn = document.querySelectorAll('.btn');
let content = document.querySelectorAll('.content');

function modify(className, modify, index) {
    let mass = document.querySelectorAll(className);

    for (let i = 0; i < mass.length; i++) {
        mass[i].classList.remove(modify);
        if (i === index) {
            mass[i].classList.add(modify);
        }
    }
}

function change(index) {
    modify('.btn', 'active', index);
    modify('.content', 'active', index);
}

for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function () {
        change(i);
    })
}

function modalControl() {
    let $modal = document.querySelector(".modal");
    const open = () => {
        $modal.classList.add("show");
    };

    const close = () => {
        $modal.classList.remove("show");
    };

    const toggle = (event) => {
        if (event === "close") {
            close();
        } else {
            open();
        }
    };

    return {toggle};
}

let modal = modalControl();

function validate() {
    const $form = document.querySelector("form");
    const $input = $form.querySelector("input");
    const $textarea = $form.querySelector("textarea");
    const clearForm = () => {
        $input.value = "";
        $textarea.value = ''

    };
    const getOk = () => {

        let field = document.querySelectorAll('.create-task');
        field = [...field];
        let nTask = field.reduce((_nTask, item) => {
           // console.log(item.name, item.value)
            _nTask[item.name] = item.value;
            return _nTask;
        }, {});

        tasks.cur.push(nTask)
        //console.log(tasks)
        table();


        modal.toggle("close");
        clearForm();

    };
    const checkForm = () => {

        if (!$input.value) {

            $input.classList.add("error");

        } else {
            $input.classList.remove("error");
            getOk();
        }

    };

    return {checkForm, clearForm};
}

let valid = validate();

function table() {
    let $table = document.querySelector(".table");
    $table.innerHTML = "";
    for (let i = 0; i<tasks.cur.length; i++) {
        $table.innerHTML += `<tr data-id="i">
            <td>${tasks.cur[i].taskName} </td>
            <td>${tasks.cur[i].taskDesc}  </td>
            <td>${tasks.cur[i].taskPriority}   </td>
            <td><div class="curBtn">
            <button class="edit" ><i class="far fa-edit"></i></button>
            <button class="done" ><i class="far fa-check-circle"></i></button>
           <button class="delete" ><i class="far fa-trash-alt"></i></button>
            </div></td>
           
            </tr>`;

    }

}

function editTask() {
    const done = () => {
        for (let i = 0; i < tasks.cur.length; i++){

            let $table = document.querySelector(".table");
            $table.closest('tr');
           if($table.dataset.id==="i"){
               console.log('true')
           }



        }
    }

        return {done}

}

let edit = editTask();

document.addEventListener("click", function (e) {
    if (
        e.target.classList.contains("modal") ||
        e.target.classList.contains("close")
    ) {
        modal.toggle("close");
        valid.clearForm();
    }

    if (e.target.classList.contains("add")) {
        modal.toggle("open");
    }

    if (e.target.classList.contains("btn-ok")) {
        valid.checkForm();
    }
    if (e.target.classList.contains('done')) {
        edit.done()
    }
})


CSS

i{
    pointer-events: none;
}
.main{
    margin: 20px;
}
.main .btn{
    background-color: darkgray;
    outline: none;
}
.content .window{
    border: 2px solid #000;
    display: inline-block;
    position: relative;
    min-height: 100px;
    min-width: 250px;
    padding-bottom: 45px;
    padding-right: 20px;

}
.curBtn{
    display: flex;
    flex-direction: row;
}

table td{
    padding-right:5px;
}
.content .window .add{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 3px;
    right: 5px;

}
.content .window button .add i{

    margin-left: -1px;
}
.content{
    display: none;
    position: relative;
}


.content.active{
    display: block;
    width: 25px;
    height: 25px;
}
.modal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
}

.modal.show{
    display: block;
    position: absolute;
    top:150px;
    left: 0;


}

.popap {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .5);
    width: 300px;
    height: 250px;
    background: #fff;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: default;
    border-radius: 3px;
}

.popap-head {
    position: relative;
    height: 25px;
}

.popap-head .close {
    position: absolute;
    height: 20px;
    padding: 0 2px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #ccc;
    cursor: pointer;
}

.popap-head .close:hover {
    border-color: #333;
}

.popap-main {
    padding: 20px;
    box-sizing: border-box;
}

.popap-form {
    margin-bottom: 20px;
}

.popap-main label {
    display: block;
    margin-bottom: 10px;
}

.popap-main label span {
    font: 12px sans-serif;
    display: block;
}

.popap-main label input {
    width: 100%;
    margin: 0;
    padding: 0;
}

.popap-main label input.error{
    border-color: red;
}

.popap-btn {
    text-align: right;
}

.btn {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}
.btn-ok{

    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}
.btn:hover {
    border-color: #333;
}

  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы