信息表（js实例）

最新推荐文章于 2024-09-16 08:47:17 发布

朝阳古天乐.

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量50

点赞数

文章标签： javascript 学习开发语言前端

本文链接：https://blog.csdn.net/m0_52389888/article/details/134295992

版权

功能实现：对表格进行值的添加，删除，插入，以及添加后对表单中的值进行清空

使用技术：Jquery对DOM节点的操作，bootstrap的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
    
</head>
<body>
    <div id="app" class="container">
        <div class="text-primary h3">信息表</div>
        <div class="form-group">
            <label for="exampleInputEmail1">姓名： </label>
            <input type="text" v-model="name" id="inp" class="form-control">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">电话： </label>
            <input type="text" id="ph" class="form-control">
        </div>
        
        <button type="button" id="btn" class="btn btn-info">添加</button>
        <button type="button" id="btn1" class="btn  btn-warning">重置</button>
        <table class="table table-bordered table-hover">
            <tr id="t">
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <!-- <tr > -->
                <!-- <td id="index"></td>
                <td id="name"></td>
                <td id="tel"></td>
                <td id="time"></td>
                <td>
                    <button class="btn btn-danger" type="button" @click="del(index,item.id)">删除</button>
                </td> -->
            <!-- </tr> -->
            <tr v-if="users.length == 0">
                <td colspan="5">暂无数据</td>
            </tr>
            <tr v-else>
                <td colspan="5"><button class="btn btn-danger" @click="delAll()">全部删除</button></td>
            </tr>
        </table>
    </div>
  <script src="./jquery-3.5.1.min.js"></script>
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>

    <script>
            //获取年月日时间
        const now = new Date();

        const year = now.getFullYear();
        const month = ('0' + (now.getMonth() + 1)).slice(-2);
        const day = ('0' + now.getDate()).slice(-2);
        const hours = ('0' + now.getHours()).slice(-2);
        const minutes = ('0' + now.getMinutes()).slice(-2);

        const formattedTime = year +"年"+ month +"月"+ day +"日"+ hours +":" + minutes;
        // console.log(formattedTime);


        // 执行添加操作
        $("#btn").click(function(){
            var inp = $("#inp").val().trim()
            var ph = $("#ph").val().trim() 
            var id = new Date().getTime();
            
            //判断添加的值是否为空
            if($("#inp").val()===""||($("#ph").val()===""))
            {
                    alert("输入值不能为空");
                    return;
            }   
            // 向table表格追加tr节点
        $(".table tbody #t").after(`
        <tr>
                <td id="index">${id}</td>
                <td id="name">${inp}</td>
                <td id="tel">${ph}</td>
                <td id="time">${formattedTime}</td>
                <td>
    <button class="btn btn-danger" onclick="_del(this)" type="button">删除</button>
                </td>
                </tr>
    `);
            //   登录后进行表单清空值
                $("#inp").val(""); 
                $("#ph").val(""); 
    
            });


            // 删除操作
            function _del(that){ 
            $(that).parent().parent().remove()
        }


        //表单值清空
        $("#btn1").click(function(){
            $("#inp").val(""); 
            $("#ph").val(""); 
        })


            

       
    </script>
</body>
</html>