52-案例4-动态表格

最新推荐文章于 2022-11-05 19:45:00 发布

山东大葱

最新推荐文章于 2022-11-05 19:45:00 发布

阅读量664

点赞数

分类专栏： JavaWeb 文章标签： webview elementui javascript

本文链接：https://blog.csdn.net/shwjakak/article/details/121808641

版权

JavaWeb 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

分析：
添加的动作
     1.给添加按钮绑定单击事件  2-6都是function中的方法体
     2.获取文本框的内容
     3.创建td，设置td的文本为文本框的内容
     4.创建tr
     5.将td添加到tr中
     6.获取table将tr添加到table中
 删除的动作
     1、确定点击的是哪一个超链接
     2.怎么删除  方法removeChild();通过父节点删除子节点  tr的父标签是table
     所以通过a超链接标签要获取table标签  所以通过a标签先获取td 再获取 tr 再获取table标签

a标签中定义了一个onclick是一个事件然后this是当前超链接对象 obj是一个形参

<!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><!--表头行的信息设置 tr th -->
        <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>
    <script>
        /*分析：
        添加的动作
             1.给添加按钮绑定单击事件  2-6都是function中的方法体
             2.获取文本框的内容
             3.创建td，设置td的文本为文本框的内容
             4.创建tr
             5.将td添加到tr中
             6.获取table将tr添加到table中
         删除的动作
             1、确定点击的是哪一个超链接
             2.怎么删除  方法removeChild();通过父节点删除子节点  tr的父标签是table
             所以通过a超链接标签要获取table标签  所以通过a标签先获取td 再获取 tr 再获取table标签
        */
        var btn_add= document.getElementById("btn_add");
        btn_add.onclick=function () {

             //获取文本框的内容
            var id=document.getElementById("id").value;  //value是一个属性  是文本框中的内容
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;

            //创建td 赋值td的标签体  注意这里的td就是上面html的td td格式什么的都是跟上面一样的
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);//注意这里的id就是字符串 因为value返回了内容是字符串类型
            td_id.appendChild(text_id);//这里相当于一个文本子节点 加入到td列标签中

            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);

            //a 超链接标签的td
            var td_a = document.createElement("td");
            var ele_a = document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0)");
            var text_a = document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);

            //创建tr
            var tr = document.createElement("tr");
            //添加td到tr 形成一个子父级的关系
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);
            //获取table 将tr添加到table中
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);

            }

            //删除方法
            function delTr(obj){
                alert(obj);
                //this就是当前超链接的对象
                //通过超链接a标签删除tr一行标签
                var table=obj.parentNode.parentNode.parentNode;  //当前的table
                var tr=obj.parentNode.parentNode; //当前的tr
                table.removeChild(tr);
        }
    </script>
</table>
</body>
</html>

使用innerTHML