javascript ：点击编辑时更新文本框中 <tr> 的所有 <td> 元素

Question

我刚开始使用 javascript，我正在使用 Dom 元素并使用 table.

创建了一个 crud 演示

CRUDCODE：

     <html>
     <head>
     <style type="text/css">
        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
          }
    </style>
     </head>
     <input type="text" id="name"><br /><br />
     <input type="text" id="age"><br /><br />
     <input type="text" id="email"><br /><br />
     <input type="button" value="addNew" id="addNew"><br />
     <div id="output"></div>
     <script>
         let rows = [{
             name: "John",
             age: 20,
             email: "abc@gmail.com"
         }, {
            name: "Jack",
            age: 50,
            email: "pqr@gmail.com"
         }, {
            name: "Son",
            age: 45,
            email: "xyz@gmail.com"
         }];
          window.onload = building();
          let addNew = document.getElementById("addNew");
          addNew.onclick = function () {
          let name = document.getElementById("name").value;
          let age = document.getElementById("age").value;
          let email = document.getElementById("email").value;
          rows.push({
              name,
              age,
              email
          });
          console.log(rows);
          building();
          }
          function building() {
    let html = "<h1>student-Info</h1><table align='center'>";
    for (let i = 0; i < rows.length; i++) {
        html += '<tr id="id' + i + '"data-row="' + i + '">';
        html += "<td>" + rows[i].name + "</td>";
        html += "<td>" + rows[i].age + "</td>";
        html += "<td>" + rows[i].email + "</td>";
        html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
        html += "<td><a href='#' data-action='edit'>Edit</a></td>";
        html += '</tr>';
    }
    html += "</table>";
    document.querySelector('#output').innerHTML = html;
     let deleted = document.querySelectorAll('[data-action="delete"]');
    for (let i = 0; i < deleted.length; i++) {
        deleted[i].addEventListener('click', function () {
            event.preventDefault();
            let ival = this.closest('[data-row]').getAttribute('data-row');
            let r = rows.splice(ival, 1);
            building();
           console.log(r);
        })
    }
    let edited = document.querySelectorAll('[data-action="edit"]');
    console.log(edited);
    for (let i = 0; i < edited.length; i++) {
        edited[i].addEventListener('click', function () {
            event.preventDefault();
            let row = this.closest('[data-row]');
            let rid = row.getAttribute('data-row');
            let td = row.firstElementChild;
            let input = document.createElement("input");
            input.type = "text";
            input.value = td.innerText;
            td.innerHTML = "";
            td.appendChild(input);
            input.onblur = function () {
                td.removeChild(input);
                td.innerHTML = input.value;
                rows[rid] = input.value;
            }
        })
    }
}

     </script>
     </html>

我正在循环“table”中获取所有数组数据，但是当我单击编辑时，我无法转换所有“td”元素在“输入”字段中，只有第一个“” 元素将被转换。

大家有什么想法请帮忙整理一下。谢谢

Answer 1

您在代码中为 firstElement 应用了输入字段，但您需要获取所有 editable table 字段并像这样更新它

<html>

<head>
    <style type="text/css">
        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<input type="text" id="name"><br /><br />
<input type="text" id="age"><br /><br />
<input type="text" id="email"><br /><br />
<input type="button" value="addNew" id="addNew"><br />
<div id="output"></div>
<script>
    let rows = [{
        name: "John",
        age: 20,
        email: "abc@gmail.com"
    }, {
        name: "Jack",
        age: 50,
        email: "pqr@gmail.com"
    }, {
        name: "Son",
        age: 45,
        email: "xyz@gmail.com"
    }];
    window.onload = building();
    let addNew = document.getElementById("addNew");
    addNew.onclick = function () {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let email = document.getElementById("email").value;
        rows.push({
            name,
            age,
            email
        });
        building();
    }
    function building() {
        let html = "<h1>student-Info</h1><table align='center'>";
        for (let i = 0; i < rows.length; i++) {
            html += '<tr id="id' + i + '"data-row="' + i + '">';
            html += "<td data-col='name'>" + rows[i].name + "</td>";
            html += "<td data-col='age'>" + rows[i].age + "</td>";
            html += "<td data-col='email'>" + rows[i].email + "</td>";
            html += "<td><a href='#' data-action='edit'>Edit</a></td>";
            html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
            html += '</tr>';
        }
        html += "</table>";
        document.querySelector('#output').innerHTML = html;
        let deleted = document.querySelectorAll('[data-action="delete"]');
        for (let i = 0; i < deleted.length; i++) {
            deleted[i].addEventListener('click', function () {
                event.preventDefault();
                this.closest('[data-row]').parentNode.removeChild(this.closest('[data-row]'));
            })
        }
        let edited = document.querySelectorAll('[data-action="edit"]');
        for (let i = 0; i < edited.length; i++) {
            edited[i].addEventListener('click', function () {
                event.preventDefault();
                let row = this.closest('[data-row]');
                let rid = row.getAttribute('data-row');
                const tdList  = row.querySelectorAll('td[data-col]');
                [...tdList].forEach(td => {
                    let input = document.createElement("input");
                    input.type = "text";
                    input.value = td.innerText;
                    td.innerHTML = "";
                    td.appendChild(input);
                    input.onblur = function () {
                        td.removeChild(input);
                        td.innerHTML = input.value;
                        rows[rid][td.dataset.col] = input.value;
                    }
                })
            })
        }
    }

</script>

</html>

javascript ：点击编辑时更新文本框中 <tr> 的所有 <td> 元素

javascript : to update all <td> element of <tr> in textbox when click on edit

javascript

html

jsobject