HTML+CSS+JavaScript 01

最新推荐文章于 2024-05-23 16:52:46 发布

Kyrie2011

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量77

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_18527763/article/details/90084277

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

    </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"/>
    </div>
    <table id="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>
        //添加功能
        /*
        var btn = document.getElementById("btn");
        var table = document.getElementById("table");
        function fun(){
            var id_value = document.getElementById("id").value;
            var name_value = document.getElementById("name").value;
            var gender_value = document.getElementById("gender").value;
             //创建id列，先获取文本节点，在将文本节点加入到td节点
            var td_id = document.createElement("td");
            var id_text = document.createTextNode(id_value);
            td_id.appendChild(id_text);

            //创建name列，先获取文本节点，在将文本节点加入到td节点
            var td_name = document.createElement("td");
            var name_text = document.createTextNode(name_value);
            td_name.appendChild(name_text);

            //创建gender列，先获取文本节点，在将文本节点加入到td节点
            var td_gender = document.createElement("td");
            var gender_text = document.createTextNode(gender_value);
            td_gender.appendChild(gender_text);

            //创建操作列，先获取文本节点，在将文本节点加入到td节点
            var td_a = document.createElement("td");
            var a = document.createElement("a");
            a.setAttribute("href","javascript:void(0)");
            a.setAttribute("onclick","delTr(this)");
            var a_text = document.createTextNode("删除");
            a.appendChild(a_text);
            td_a.appendChild(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);

            //将td添加到table
            //var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }
        btn.onclick = fun;
        */

        //使用innerHTML添加
        var btn = document.getElementById("btn");
        var table = document.getElementById("table")
        document.getElementById("btn").onclick = function () {
            var id_value = document.getElementById("id").value;
            var name_value = document.getElementById("name").value;
            var gender_value = document.getElementById("gender").value;

            table.innerHTML += " <tr>\n" +
                "            <td>"+id_value+"</td>\n" +
                "            <td>"+name_value+"</td>\n" +
                "            <td>"+gender_value+"</td>\n" +
                "            <td>\n" +
                "                <a href=\"javascript:void(0)\" οnclick=\"delTr(this);\">删除</a>\n" +
                "            </td>\n" +
                "        </tr>"
        };


        //删除功能:如何确定哪一个超链接呢？
        function delTr(obj) {
            var tbl = obj.parentNode.parentNode.parentNode;
            var tr_node = obj.parentNode.parentNode;
            //同tbl移除子节点
            tbl.removeChild(tr_node);
        }

    </script>

</body>
</html>

Kyrie2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript 01

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> div{ text-align: center; ...
复制链接

扫一扫