JavaScript 小demo

季布，

于 2021-12-26 14:03:50 发布

阅读量351

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_47906106/article/details/122154836

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

案例：
实现一个用户管理系统

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/user.css">
    <script src="js/user.js"></script>

</head>

<body>
    <div id="container">
        <h2>用户管理系统</h2>
        <table id="mytbl">
            <thead>
                <tr>
                    <th>全选 <input type="checkbox" id="all" onchange="checkAll()"></th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" name="item" onchange="checkItem()"></td>
                    <td>lisi</td>
                    <td>20</td>
                    <td>male</td>
                    <td>120</td>
                    <!--此处的this表示事件源-->
                    <td><button onclick="deleteUser(this)">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="item" onchange="checkItem()"></td>
                    <td>zhangsan</td>
                    <td>20</td>
                    <td>male</td>
                    <td>120</td>
                    <td><button onclick="deleteUser(this)">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><button onclick="deleteMultiple()">删除多个</button></td>
                    <td colspan="5" class="btn-right">
                        <button onclick="deleteFirst()">从首行删除</button>
                        <button onclick="deleteLast()">从末行删除</button>
                    </td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <form id="frm">
            姓名: <input type="text" id="name"><br> 年龄: <input type="text" id="age"><br> 性别: <input type="radio" name="sex" id="m" value="male" checked>男 <input type="radio" name="sex" id="f" value="female">女<br> 电话: <input type="text" id="phone"><br>
            <input type="button" value="添    加" onclick="addUser()">
            <input type="reset" value="重    置">

        </form>

    </div>
</body>

</html>

css代码

#container {
    text-align: center;
}

#mytbl {
    width: 500px;
    border: 1px solid #ccc;
    margin: 0 auto;
}

td,
th {
    border: 1px solid #ccc;
}

.btn-right {
    text-align: right;
}

#frm {
    line-height: 30px;
}

JS代码

//简化根据id获取元素
function $(id) {
    return document.getElementById(id);
}

//添加用户
function addUser() {
    //创建tr
    var tr = document.createElement('tr')
        //创建td
    var tdChk = document.createElement('td')
    var tdName = document.createElement('td')
    var tdAge = document.createElement('td')
    var tdSex = document.createElement('td')
    var tdPhone = document.createElement('td')
    var tdDelete = document.createElement('td')
        // 将数据添加到td中
    var chkDelete = document.createElement("input")
    chkDelete.type = "checkbox"
    chkDelete.name = "item"
    chkDelete.onchange = function() {
        $('all').checked = true
        var items = document.getElementsByName('item');
        for (var item of items) {
            if (!item.checked) {
                $('all').checked = false
                break
            }
        }
    }

    tdChk.appendChild(chkDelete);
    tdName.innerHTML = $('name').value;
    tdAge.innerHTML = $("age").value;
    tdSex.innerHTML = $('m').checked ? $('m').value : $('f').value;
    tdPhone.innerHTML = $('phone').value;
    var btnDelete = document.createElement('button')
    btnDelete.innerHTML = "删除";
    btnDelete.onclick = function() {
        this.parentNode.parentNode.remove()
    }
    tdDelete.appendChild(btnDelete);
    //将td添加到tr中
    tr.appendChild(tdChk);
    tr.appendChild(tdName);
    tr.appendChild(tdAge);
    tr.appendChild(tdSex);
    tr.appendChild(tdPhone);
    tr.appendChild(tdDelete);
    //将tr添加到tbody中
    $('tb').appendChild(tr)

}

//删除用户
function deleteUser(btn) {
    btn.parentNode.parentNode.remove();

}

//首行删除
function deleteFirst() {
    $('tb').firstElementChild.remove();

}

//末行删除
function deleteLast() {
    $('tb').lastElementChild.remove();
}

//实现全选的功能
function checkAll() {
    var items = document.getElementsByName('item');
    for (var item of items) {
        item.checked = $('all').checked;
    }
}

//实现当选中下面所有复选框时自动选中全选
function checkItem() {
    $('all').checked = true
    var items = document.getElementsByName('item');
    for (var item of items) {
        if (!item.checked) {
            $('all').checked = false
            break
        }
    }
}

// 删除多个
function deleteMultiple() {
    var items = document.getElementsByName('item');
    for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
            items[i].parentNode.parentNode.remove();
            i--
        }
    }
}

在这里插入图片描述

季布，

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 小demo

案例：实现一个用户管理系统HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫