自己用js封装一个表单添加按钮

最新推荐文章于 2022-07-20 17:14:06 发布

Rafi Yang

最新推荐文章于 2022-07-20 17:14:06 发布

阅读量505

点赞数 1

分类专栏：前端开发 JS 文章标签： javascript js

本文链接：https://blog.csdn.net/Frank_yzb123123/article/details/110874358

版权

前端开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

自己用js封装一个表单添加按钮，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="name">名字</label>
        <input type="text" id="name">
        <label for="old">几岁</label>
        <input type="text" id="old">
        <button>添加</button>

        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>几岁</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var _name = document.querySelector('#name')
        var _old = document.querySelector('#old')
        var oBtn = document.querySelector('button')
        var _tbody = document.querySelector('tbody')
        var _th = document.querySelector('th')
        _th.style.display = 'block'
        _th.style.width = '100px'
        _th.style.color = 'gold'

        var data = []
        oBtn.onclick = () => {
            var o = {}
            o.name = _name.value
            o.old = _old.value
            data.push(o)
            renderUI(data)
        }

        function renderUI(_data) {
            var html = _data.map(function (item, index) {
                return `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.old}</td>
                </tr>
            `
            }).join('')
            _tbody.innerHTML = html
        }
    </script>
</body>

</html>

Rafi Yang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己用js封装一个表单添加按钮

自己用js封装一个表单添加按钮，直接上代码```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&lt
复制链接

扫一扫