利用javascript写一个动态表格

最新推荐文章于 2023-01-02 01:38:49 发布

qq_43717970

最新推荐文章于 2023-01-02 01:38:49 发布

阅读量153

点赞数 1

分类专栏： JavaScript入门笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_43717970/article/details/115283868

版权

JavaScript入门笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，
而void(0)表示一个空的方法，也就是不执行js函数。

<!DOCTYPE html>
<html>
    <head>
        <title>动态表格</title>
    </head>

    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        th,td{
            text-align: center;
            border: 1px solid;
        }

        table{
            margin: auto;
            border: 1px solid;
            width: 500px;
        }
    </style>
    <body>
        <form action="" method="GET">
            <div>
                <input type="text" placeholder="请输入编号" id="id">
                <input type="text" placeholder="请输入姓名" id="name">
                <input type="text" placeholder="请输入性别" id="gender">
                <input type="button" value="添加" id="btn_add">
            </div>
        </form>

        <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>

            <script>
                document.getElementById("btn_add").onclick=function(){
                    // 获取文本框内容
                    var id=document.getElementById("id").value;
                    var name=document.getElementById("name").value;
                    var gender=document.getElementById("gender").value;
                    // 创建td，赋值td的标签体
                   
                    var td_id=document.createElement("td");
                    var text_id=document.createTextNode(id);
                    td_id.appendChild(text_id);

                   
                    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);

                    var td_a=document.createElement("td");
                    var ele_a=document.createElement("a");
                    ele_a.setAttribute("href","javascript:void(0)");
                    ele_a.setAttribute("onclick","delTr(this);");
                    var text_a=document.createTextNode("删除");
                    ele_a.appendChild(text_a);
                    td_a.appendChild(ele_a);
                    //创建tr
                    var tr=document.createElement("tr");
                    tr.appendChild(td_id);
                    tr.appendChild(td_name);
                    tr.appendChild(td_gender);
                    tr.appendChild(td_a);
                    var table=document.getElementsByTagName("table")[0];
                    table.appendChild(tr);
                }


                function delTr(obj){
                        // alert(obj);
                        var tr=obj.parentNode.parentNode;
                        var table=obj.parentNode.parentNode.parentNode;
                        table.removeChild(tr);
                    }
            </script>
        </table>
    </body>
</html>

qq_43717970

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用javascript写一个动态表格

href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。<!DOCTYPE html><html> <head> <title>动态表格</title> </head> <style> div{ text-align: c
复制链接

扫一扫