js简易动态表格

最新推荐文章于 2022-05-07 00:39:40 发布

沫痕轩

最新推荐文章于 2022-05-07 00:39:40 发布

阅读量288

点赞数

分类专栏： JavaScript 文章标签： js 动态表格

本文链接：https://blog.csdn.net/jfr123/article/details/102977504

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js动态表格

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>

    //添加
    document.getElementById("btn_add").onclick = function () {
        //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 获取table
        var table = document.getElementsByTagName("table")[0];

        table.innerHTML+="<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "    </tr>";
    }
    //删除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

</script>
</body>
</html>

沫痕轩

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js简易动态表格

js动态表格效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { border: 1px...
复制链接

扫一扫

专栏目录