web前端案例一：简易动态表格

最新推荐文章于 2024-06-15 21:15:02 发布

知足Content+

最新推荐文章于 2024-06-15 21:15:02 发布

阅读量1.6k

点赞数 1

分类专栏： web前端文章标签： javascript html js

本文链接：https://blog.csdn.net/weixin_44197120/article/details/113183568

版权

web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1. 动态表格

效果图：
在这里插入图片描述
代码：

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

        }
        td{
            border: 1px solid blue;
            height: 40px;
            text-align: center;
        }
        div{
            text-align: center;
            margin: 50px;
        }

    </style>
</head>
<body>
<div>
    <input type="text"  placeholder="请输入编号" id="bianhao">
    <input type="text"  placeholder="请输入姓名" id="xingming">
    <input type="text"  placeholder="请输入性别" id="xingbie">
    <input type="button" id="b_tianjia" value="添加">
</div>

    <br>
    <hr  color="red">

<table id="biaoge">
    <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="del(this);" >删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>小李</td>
        <td>男</td>
        <td><a href="javascript:void(0);"  onclick="del(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>小花</td>
        <td>女</td>
        <td><a href="javascript:void(0);"  onclick="del(this);">删除</a></td>
    </tr>
</table>

<script>
    var add =document.getElementById("b_tianjia");



    // add.onclick =  function() {
    //     var bianhao = document.getElementById("bianhao").value;
    //     var name = document.getElementById("xingming").value;
    //     var sex = document.getElementById("xingbie").value;
    //     var table = document.getElementById("biaoge");
    //
    //     let td_id = document.createElement("td");
    //     let text_id = document.createTextNode(bianhao);
    //     td_id.appendChild(text_id);
    //     let td_name = document.createElement("td");
    //     let text_name = document.createTextNode(name);
    //     td_name.appendChild(text_name);
    //     let td_sex = document.createElement("td");
    //     let text_sex = document.createTextNode(sex);
    //     td_sex.appendChild(text_sex);
    //     let td_del = document.createElement("td");
    //     let a = document.createElement("a");
    //     a.setAttribute("href","javascript:void(0);");
    //     a.setAttribute("onclick","del(this);");
    //     let del = document.createTextNode("删除");
    //     a.appendChild(del);
    //     td_del.appendChild(a)
    //     let tr = document.createElement("tr");
    //     tr.appendChild(td_id);
    //     tr.appendChild(td_name);
    //     tr.appendChild(td_sex);
    //     tr.appendChild(td_del);
    //
    //     table.appendChild(tr);
    //
    //
    // }


    add.onclick =  function() {
        var bianhao = document.getElementById("bianhao").value;
        var name = document.getElementById("xingming").value;
        var sex = document.getElementById("xingbie").value;
        var table = document.getElementById("biaoge");
        table.innerHTML+="    <tr>\n" +
            "        <td>"+bianhao+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+sex+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\"  οnclick=\"del(this);\">删除</a></td>\n" +
            "    </tr>";
    }
    function del(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
            }
</script>

</body>
</html>

用两种方式实现了功能！

知足Content+

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
web前端案例一：简易动态表格

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

扫一扫

专栏目录