对于JavaScript的重新学习及期间遇到的问题

最新推荐文章于 2023-07-05 16:21:03 发布

Unknowncheats

最新推荐文章于 2023-07-05 16:21:03 发布

阅读量127

点赞数

分类专栏：技术

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

559 篇文章 8 订阅

订阅专栏

由于本身对于JavaScript的学习间断性，学的很不扎实，加上JavaScript对于今后学习的重要性，并且再加上本次又遇到期末复习，所以打算比较系统的重新学习一下JavaScript。下面就是通过3个简单的案例对于这几天已学习到的JS部分知识的练习

`1. 动态表单（Node的添加删除，属性的动态添加）`

在这里插入图片描述
表格基本框架的和构建：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表单</title>

    <style>
        .div01 {
            /*border: 1px solid red;*/
            width: 600px;
            height: 200px;
            margin: auto;
            text-align: center;
        }

        tr {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="div01">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="sex">
    <input type="button" value="确定" id="button">
    <p>
    <table border="1" width="600px" id="table">
        <tr>
            <td>编号 </td>
            <td>姓名</td>
            <td>性别</td>
            <td>删除组件</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Caiden_Micheal</td>
            <td>男</td>
            <td><a href="javascript:void 0" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    </p>
</div>
</body>
</html>

实现方法一

<script>
    var buttonp = document.getElementById("button");
    buttonp.onclick = function () {
        var ID = document.getElementById("id").value;
        // alert(ID);
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;

        document.getElementById("table").innerHTML +=
            "<tr>" + "<td>" + ID + "</td>" +
            "<td>" + name + "</td>" +
            "<td>" + sex + "</td>" +
            "<td> <a href=\"javascript:void 0\" οnclick=\"del(this)\">删除</a> </td>" + "</tr>";
    }

    function del(o) {
        var noded = o.parentNode.parentNode;
        var table = o.parentNode.parentNode.parentNode;
        table.removeChild(noded);
    }
</script>

实现方法二：

<script>
    var buttonp = document.getElementById("button");
    buttonp.onclick = function () {
        var IDp = document.getElementById("id").value;
        var ID = document.createTextNode(IDp);

        // alert(ID);
        var namep = document.getElementById("name").value;
        var name = document.createTextNode(namep);
        var sexp = document.getElementById("sex").value;
        var sex = document.createTextNode(sexp);

        //获取table节点
        var table = document.getElementById("tr").parentNode;

        //创建节点并添加子节点内容
        var td01 = document.createElement("td");
        td01.appendChild(ID);
        var td02 = document.createElement("td");
        td02.appendChild(name);
        var td03 = document.createElement("td");
        td03.appendChild(sex);
        var tr = document.createElement("tr");

        tr.appendChild(td01);
        tr.appendChild(td02);
        tr.appendChild(td03);
        // <a href="javascript:void 0" οnclick="del(this)">删除</a>
        var td04 = document.createElement("td");
        var a = document.createElement("a");
        a.setAttribute("href", "javascript:void 0");
        // a.onclick = del(this);
        a.setAttribute("onclick","del(this)");
        var text = document.createTextNode("删除");
        a.appendChild(text);
        td04.appendChild(a);
        tr.appendChild(td04);
        table.appendChild(tr);
        // alert()

    }

    function del(o) {
        var noded = o.parentNode.parentNode;
        var table = o.parentNode.parentNode.parentNode;
        table.removeChild(noded);
    }

`2.动态表单（全部选择 / 全部不选 / 反选）`

在这里插入图片描述
表格的基本构建和上面案例相同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表单</title>

    <style>
        .div01 {
            /*border: 1px solid red;*/
            width: 600px;
            height: 200px;
            margin: auto;
            text-align: center;
        }

        tr {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="div01">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="sex">
    <input type="button" value="确定" id="button">
    <p>
    <table border="1" width="600px" id="table">
        <tr>
            <th><input type="checkbox" id="checkbo"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>删除组件</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>1</td>
            <td>OB</td>
            <td>男</td>
            <td><a href="javascript:void 0" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    </p>
    <p>
        <input type="button" value="All Select" id="all">
        <input type="button" value="All not Select" id="notall">
        <input type="button" value="Reverse Select" id="reverse">
    </p>
</div>

<script>
    var