• JS实现表格增删改操作


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表格增删</title>
        <style>
            .panel{
                760px;
                border: 1px solid #ddd;
                border-radius: 5px;
                padding: 20px;
                margin: 10px auto;
            }
            .panel>label{
                margin-right: 10px;
            }
            .panel input{
                font-size: 14px;
                color: #444;
                padding: 5px;
            }
            .panel input[type=text]{
                100px;
            }
            .list{
                800px;
                border: 1px solid #ddd;
                margin: 10px auto;
            }
            .list table{
                800px;
                border-collapse: collapse;
                border: 1px solid #ccc;
                font-size: 14px;
                font-family: 'Microsoft YaHei';
                line-height: 14px;
                color: #444;
            }
            .list thead{
                background-color: #369; 
                color: #fff;         
                font-weight: bold;
                font-size: 16px;
            }
            .list th , .list td{
                border: 1px solid #ccc;
                padding: 10px;
                text-align: center;
            }
            .list tbody a{
                color: #369;
                text-decoration: none;
            }
        </style>
        <script>
            function $id(id){
                return document.getElementById(id);
            }
            window.onload = function(){           
                $id('add').onclick = function(){
                    //1.获取用户输入的数据
                    var sId = $id('serNo').value;
                    var sName = $id('stuName').value;
                    var sNo = $id('stuNo').value;
                    var sGender = $id('nan').checked ? '男' : '女';
                    // console.log(sGender);
                    var del = '<a href="#">删除</a>';
                    var tbody = document.getElementsByClassName('list')[0].getElementsByTagName('tbody')[0];
                    var newTr = document.createElement('tr');
                    //拼写tr内的所有td标签
                    var trInnerHtml = '<td>' + sId + '</td>';
                    trInnerHtml += '<td>' + sName + '</td>';
                    trInnerHtml += '<td>' + sNo + '</td>';
                    trInnerHtml += '<td>' + sGender + '</td>';
                    trInnerHtml += '<td>' + del + '</td>';
                    newTr.innerHTML = trInnerHtml;
                    //给newTr里的删除a标签,注册onclick事件
                    var delLink = newTr.getElementsByTagName('a')[0];
                    delLink.onclick = function(){
                        var tr = this.parentNode.parentNode;
                        var tbody = tr.parentNode;
                        tbody.removeChild(tr);
                    }
                    //把tr插入到tbody内部
                    tbody.append(newTr);
                }
                //2.注册删除事件
                var dels = document.getElementsByClassName('list')[0].getElementsByTagName('a');
                for (var i = 0; i < dels.length; i++) {
                    dels[i].onclick = function(){
                        var tr = this.parentNode.parentNode;
                        var tbody = tr.parentNode;
                        tbody.removeChild(tr);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="panel">
            <label for="">序号:<input type="text" id="serNo"></label>
            <label for="">姓名:<input type="text" id="stuName"></label>
            <label for="">学号:<input type="text" id="stuNo"></label>
            <label for="">性别:
                <label for="nan">男:<input type="radio" name="gender" value="nan" id="nan" checked="checked"></label></label>
                <label for="nv">女:<input type="radio" name="gender" value="nv" id="nv"></label>
            </label>
            <input type="button" id="add" value=" 添 加 ">
        </div>
        <div class="list">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>徐有庆</td>
                        <td>160985147</td>
                        <td>男</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
  • 相关阅读:
    模板汇总 —— 杨式图表
    HDU 6634 网络流最小割模型 启发式合并
    网络流 从0开始学建图
    分层图 单调决策性DP
    模板汇总——笛卡尔树
    Bzoj 2127 happiness 最小割
    manacher --- 暂 旧版本
    Bzoj 3730 震波 动态点分治
    HDU
    Maven私服(Repository Manager)
  • 原文地址:https://www.cnblogs.com/mmit/p/11258091.html
Copyright © 2020-2023  润新知