利用事件委托编辑表格

2022/4/17 6:12:54

编程Tag： 事件委托 innerHTML value var tr 编辑表格 td document

本文主要是介绍利用事件委托编辑表格，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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'>
    <title>Document</title>
    <style>
        table{
            width: 700px;
            height: auto;
            border: 1px solid #000;
            margin-top: 10px;
            border-spacing: 0;
            border-collapse: collapse
        }
        th,td{
            border: 1px solid #000;
            text-align: center
        }
    </style>
</head>
<body>
    <form>
        姓名: <input type="text">
        年龄: <input type="text">
        性别: <input type="text">
        <!-- 提交的时候内容可以添加进去 但是页面会刷新:不要使用button按钮(阻止默认行为) -->
        <input type="button" value="提交">
    </form>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 添加的内容就写在tbody中就可以了 -->
        </tbody>
    </table>
</body>
</html>
<script>
    /*
        点击添加表格
            - 写好结构 绑定提交事件
            - 获取到输入框中的value值
            - 显示在表格中
    */
    var username = document.querySelector('input:nth-child(1)')
    var sex = document.querySelector('input:nth-child(2)')
    var age = document.querySelector('input:nth-child(3)')
    var btn = document.querySelector('input:nth-child(4)')
    var tbody = document.querySelector('tbody')
    btn.onclick = function(){
        // 创建td 创建tr 需要把td插入到tr tr再插入到tbody中
        var tr = document.createElement('tr')
        var td = document.createElement('td')
        // 获取用户输入的value值 dom元素.value
        var _username = username.value
        // 把获取到的值放在td中
        td.innerHTML = _username
        tr.appendChild(td)

        var _sex = sex.value
        var td = document.createElement('td')
        // 把获取到的值放在td中
        td.innerHTML = _sex
        tr.appendChild(td)

        var _age = age.value
        var td = document.createElement('td')
        // 把获取到的值放在td中
        td.innerHTML = _age
        tr.appendChild(td)

        // 新增一个删除按钮
        var td = document.createElement('td')
        td.innerHTML = '删除'
        tr.appendChild(td)
        // 利用事件委托 给td的父级tr绑定事件
        tr.onclick = function(e){
            var e = e || window.event
            console.log(e.target) // 精准源已经拿到了
            if(e.target.nodeName == "TD" && e.srcElement.innerHTML == '删除'){ // 兼容写法
                // 你现在的事件源是td 点击的是tr 删除tr 父级.removeChild(子级)
                tbody.removeChild(e.target.parentNode)
            }
        }

        tbody.appendChild(tr)
        // 在所有的数据添加之后 需要把上次的内容给清空掉
        username.value = ""
        sex.value = ""
        age.value = ""
    }
</script>

这篇关于利用事件委托编辑表格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

利用事件委托编辑表格

相关编程文章