js实现增删改查过程中，无法对新添加的数据进行删除修改和查找功能

在用Js实现增、删、改、查功能后，发现新添加的数据无法进行删除修改和查找操作。

HTML部分代码如下

<button class="add">添加</button>
            <input type="text" class="find" placeholder="请输入姓名">
            <table>
                <tr class="title">
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td class="name">张</td>
                    <td>12</td>
                    <td>顶顶顶顶</td>
                    <td>
                        <button class="dele">删除</button>
                        <button class="change">修改</button>
                    </td>
                </tr>
                <tr>
                    <td class="name">王</td>
                    <td>55</td>
                    <td>三生三世撒所</td>
                    <td>
                        <button class="dele">删除</button>
                        <button class="change">修改</button>
                    </td>
                </tr>
                <tr>
                    <td class="name">李</td>
                    <td>884</td>
                    <td>银行代表</td>
                    <td>
                        <button class="dele">删除</button>
                        <button class="change">修改</button>
                    </td>
                </tr>
            </table>

添加功能JS源代码如下

//添加
function add() {
    var addBtn = document.getElementsByClassName('add')[0]
    
    addBtn.onclick = function () {
        var newName = prompt("输入姓名")
        var newAge = prompt("输入年龄")
        var newAddress = prompt("输入地址")
        var tr = document.createElement('TR')
        var tab = document.getElementsByTagName('table')[0]

        tr.innerHTML = `<td class="name">${newName}</td>
                        <td>${newAge}</td>
                        <td>${newAddress}</td>
                        <td>
                            <button class="dele">删除</button>
                            <button class="change">修改</button>
                        </td>`


        tab.appendChild(tr)
    }
}

删除功能JS代码如下

// 删除
function del() {
    var deleBtn = document.getElementsByClassName('dele')
    
    for (var i = 0; i < deleBtn.length; i++) {
        deleBtn[i].onclick = function () {
            this.parentElement.parentElement.remove()
        }
    }
}

修改功能JS代码如下

//修改
function change() {
    var changeBtn = document.getElementsByClassName('change')
    for (var i = 0; i < changeBtn.length; i++) {
        changeBtn[i].onclick = function () {
            var newName = prompt("输入新姓名")
            var newAge = prompt("输入新年龄")
            var newAddress = prompt("输入新地址")

            this.parentElement.parentElement.firstElementChild.innerText = newName
            this.parentElement.parentElement.firstElementChild.nextElementSibling.innerText = newAge
            this.parentElement.parentElement.firstElementChild.nextElementSibling.nextElementSibling.innerText = newAddress
        }
    }
}

后来发现，无法对新增加的数据进行删除修改操作是因为用循环给按钮绑定事件操作是在添加数据之前就进行的。

换句话说就是新添加的数据没有绑定删除修改操作，只是个单独的Button按钮

所以说，需要在添加数据时，给新数据也绑定删除修改事件。
代码如下：

// 添加
function add() {
    var addBtn = document.getElementsByClassName('add')[0]
    addBtn.onclick = function () {
        var newName = prompt("输入姓名")
        var newAge = prompt("输入年龄")
        var newAddress = prompt("输入地址")
        var tr = document.createElement('TR')
        var tab = document.getElementsByTagName('table')[0]


        tr.innerHTML = `<td class="name">${newName}</td>
                        <td>${newAge}</td>
                        <td>${newAddress}</td>
                        <td>
                            <button class="dele">删除</button>
                            <button class="change">修改</button>
                        </td>`


        tab.appendChild(tr)
        
        // 给新数据绑定删除功能
        deleBtn = document.getElementsByClassName('dele')
        deleBtn[deleBtn.length - 1].onclick = function () {
            this.parentElement.parentElement.remove()
        }
        //给新数据绑定修改功能
        changeBtn = document.getElementsByClassName('change')
        changeBtn[changeBtn.length - 1].onclick = function () {
            var newName = prompt("输入新姓名")
            var newAge = prompt("输入新年龄")
            var newAddress = prompt("输入新地址")

            this.parentElement.parentElement.firstElementChild.innerText = newName
            this.parentElement.parentElement.firstElementChild.nextElementSibling.innerText = newAge
            this.parentElement.parentElement.firstElementChild.nextElementSibling.nextElementSibling.innerText = newAddress
        }
    }
}