jQuery任务列表案例

最新推荐文章于 2021-08-11 15:54:28 发布

来干了这碗代码

最新推荐文章于 2021-08-11 15:54:28 发布

阅读量262

点赞数 1

分类专栏： jQuery 文章标签： jquery 列表

本文链接：https://blog.csdn.net/nsnydnz/article/details/119490367

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

jQuery任务列表案例

jQuery任务列表案例

在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>任务列表</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <style type="text/css">
        .Div {
            border: 3px ridge rgba(37, 34, 34, 0.605);
            margin: 0 auto;
            text-align: center;
            width: 750px;
            height: 1000px;
            border-style: dotted solid double dashed;

        }

        h5 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: bold;
        }

        p {
            font-size: 20px;

        }

        .input-group {
            margin: 0 auto;
        }

        #exampleInputAmount {
            margin-right: 15px;
            width: 460px;
        }

        #thead1 tr th {
            font-weight: bold;
            text-align: center;
        }
    </style>


</head>

<body>
    <!-- jQuery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./layui/layui.js"></script>
    <!-- 你的 HTML 代码 -->
    <script>
        //获取当前年月日几点几分几秒星期几并打印
        function getTimer() {
            var date = new Date()
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var datee = date.getDate()
            var day = date.getDay()
            var time = year + '年' + month + '月' + datee + '日 ';
            function getTimerr() {
                var time = new Date()
                var hour = time.getHours()
                hour = hour < 10 ? '0' + hour : hour
                var minute = time.getMinutes()
                minute = minute < 10 ? '0' + minute : minute
                var second = time.getSeconds()
                second = second < 10 ? '0' + second : second
                return hour + ':' + minute + ':' + second
            }
            return time + ' ' + getTimerr()+ ' ' +week[day]
        }

        function ad(params) {
            var ss = $(params).prev().val()
            var ti = getTimer()
            
            var v = $('<tr>' +
                ' <td class="col">'+ss+'</td>' +
                ' <td class="col">'+ti+'</td> ' +
                '<td> ' +
                ' <div> ' +
                '        <button type="button" class="btn btn-default" οnclick="sb(this)">button</button> ' +
                '       <button οnclick="rm(this)" type="button" class="btn btn-default">delete</button> ' +
                '  </div> ' +
                '</td> ' +
                '</tr>)');
            $('.layui-table tbody').prepend(v)
            $(params).prev().val('');
        }
        function rm(params) {
          $(params).parent().parent().parent().remove();
          
        }
        function sb(params) {
            $(params).parent().parent().parent().children('.col').css({color:'rgb(255, 25, 25)','text-decoration': 'line-through'});
        }
    </script> 
    <div class="Div">
        <p><b>任务列表</b></p>

        <div class="input-group">
            <input type="text" class="btn btn-default" id="exampleInputAmount" placeholder="输入要添加的任务" >
            <button type="button" class="btn btn-info" id="btn1" onclick="ad(this)">add</button>
        </div>

        <div>
            <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
                <colgroup>
                    <col width="150">
                    <col>
                </colgroup>
                <thead id="thead1">
                    <tr>
                        <th>任务</th>
                        <th>时间</th>
                        <th>选择</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td class="col">敲代码</td>
                        <td class="col">Data</td>
                        <td>
                            <div>

                                <button type="button" class="btn btn-default" οnclick="sb(this)">button</button>

                                <button type="button" class="btn btn-default" οnclick="rm(this)">delete</button>


                            </div>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>

    </div>
</body>

</html>