Click here to Skip to main content
15,662,668 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I started making a ToDo List. My Add and Delete buttons are working. The problem I have in the edit part is this: When the user enters data such as Name-Surname-Email-Phone, a TR - TD is automatically created. When the user presses the edit button, he only needs to make changes on the data in that TD. The data entered by the user is inside the P tag. When you press the edit button, these are invisible and inputs are displayed on them.

<pre>function displayTasks() {
    let tbody = document.getElementById('task-list');
    tbody.innerHTML = "";

    for (let task of tasklist) {
        let tr = `
                    <tr class="table-body-items">
                        <td class="id" style="width: 5% !important;">${}</td>
                        <td class="name" style="width: 19% !important;"><p class="name_text">${}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_name"></td>
                        <td class="surname" style="width: 19% !important;"><p class="surname_text">${task.surname}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_surname"></td>
                        <td class="email" style="width: 32% !important;"><p class="email_text">${}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_email"></td>
                        <td class="phone" style="width: 15% !important;"><p class="phone_text">${}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_phone"></td>
                        <td style="width: 10% !important;">
                            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal"
                                data-bs-target="#task-modal" data-source="1" data-content="task1" onclick="editButton(${})">
                        <td style="width: 10% !important;">
                            <button class="btn btn-outline-secondary btn-sm remove" data-source="1" type="button" onclick="deleteTask(${})">
                                ^__i class="fa fa-trash fa-1" aria-hidden="true">
        tbody.insertAdjacentHTML("beforeend", tr);
        localStorage.setItem("tasklist", JSON.stringify(tasklist));

Live version of the app: <a href="">ToDo List Test - YouTube</a>[<a href="" target="_blank" title="New Window">^</a>]

What I have tried:

<pre>I added active to their class name parts and made the css part invisible and the others visible. But it only works for the top data. In other words, the user entered the system 4-5 users (name-surname-email-phone) and wrote the name of the last person he added incorrectly and clicked the edit button. When you click it, it opens an input to the top place, not the last place. What I want is for the button to work where it is. There is a high probability that the class names are the same, so they conflict.

function editButton(id) {
    for(let index in tasklist) {
        if(tasklist[index].id == id) {
            editid = index;

            console.log("tıklanan index: " + editid);

Updated 16-Oct-22 5:51am
Member 15627495 17-Oct-22 2:36am    

you're overlading TD with a p container, just fill the 'td' with datas.
by your code, you put 3 areas for display and edit : td / p / input : It's lot.
you need the TD and INPUT only.
your code will be better.

for your needs : you have .innerhtml / append / preppend to substitute an area by one another.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900