表格的添加和删除

最新推荐文章于 2018-08-05 21:13:12 发布

Deng_1957

最新推荐文章于 2018-08-05 21:13:12 发布

阅读量497

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/truesword/article/details/79362972

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.效果图

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 500px;
            margin: 20px 20px;
        }

        #stu {
            width: 500px;
            margin-left: 20px;
            border-collapse: collapse;
        }

        #stu th, td {
            border: 1px solid #CCCCCC;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('submit');
            var oTable = document.getElementById('stu');
            var aTrs = oTable.getElementsByTagName('tr');
            var id = 0;

            oBtn.onclick = function () {
                var oName = document.getElementById('name');
                var oAge = document.getElementById('age');
                var oTbody = oTable.tBodies[0];
                id++;

                var oTr = document.createElement('tr');
                var oTdId = document.createElement('td');
                var oTdName = document.createElement('td');
                var oTdAage = document.createElement('td');
                var oTdOpe = document.createElement('td');

                oTdId.innerHTML = id;
                oTdName.innerHTML = oName.value;
                oTdAage.innerHTML = oAge.value;
                oTdOpe.innerHTML = '<a href="javascript:">删除</a>';
                oTdOpe.getElementsByTagName('a')[0].onclick = function () {
                    oTbody.removeChild(this.parentNode.parentNode);
                };

                oTr.appendChild(oTdId);
                oTr.appendChild(oTdName);
                oTr.appendChild(oTdAage);
                oTr.appendChild(oTdOpe);
                oTbody.appendChild(oTr);
            };
        };
    </script>
</head>
<body>
<div id="div1">
    姓名：<input type="text" id="name">
    年龄: <input type="text" id="age">
    <input type="button" id="submit" value="添加">
</div>

<table id="stu">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

Deng_1957

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表格的添加和删除

1.效果图2.代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #div1 {
复制链接

扫一扫

专栏目录