day 12前端之jQuery

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

<head>
    <meta charset="UTF-8">
    <title>陈鹏-day12作业</title>
    <script src="./jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="./dist/css/bootstrap.css">
    <script src="./dist/js/bootstrap.js"></script>

    <style>
        .main_body{
            margin-left: 30px;
        }
        .add{
            margin-top: 20px;
            margin-left: 10px;
        }
        .write{
            margin-left: 30px;
            background-color: aqua;
            width: 300px;
            display: none;
        }
        .write form{
            margin-left: 20px;
        }
        .write input{
            margin-top: 10px;
        }
        .write .finish{
            margin-left: 130px;
        }
        table{
            margin-top: 20px;
        }
    </style>

    <script>
        $(document).ready(function(){
            //点 添加 ，显示 form表单，增加一行
            $('.add').click(function(){
                $('.write').show();
                var $trhtml =
                `<tr>
                    <td class="new1">未填写</td>
                    <td class="new2">未填写</td>
                    <td class="new3">未填写</td>
                    <td class="new4">未填写</td>
                    <td class=""><button class="rm btn btn-danger">删除</button></td>
                 </tr>`;
            $('#tab').append($trhtml);
            });

            // 绑定删除，删除一行
            $(".outer").on("click",".rm",function () {
            console.log($(this).parent());
            $(this).parent().parent().remove()
            })
        
        //点击提交，把当前最后一行的值修改成填写的值
            $('.write .sub').click(function(){
            
                var $tds = $('table tr:last');
                var $t=$($tds).find('td:not(:last)');
                console.log($t);
                
                var $input_val = [$('#name').val(),$('#age').val(),$('#dep').val(),$('#sal').val()] 
                // var $table_val = [$('.new1'),$('.new2'),$('.new3'),$('.new4')];
                $.each($input_val,function(i,j){
                    console.log(j);
                    $($t[i]).html(j);
                })
            
            })
            //填写完成，隐藏form
            $('.write .finish').click(function(){
                $('.write').css('display','none');
            }) 

        })
        
    </script>
</head>

<body>
    <div class="outer">
        <button class="add btn btn-success">添加信息</button>
        <br>
        <table id="tab" class="table table-bordered tab-content table-hover">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职位</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="">alex</td>
                    <td class="">100</td>
                    <td class="">老板</td>
                    <td class="">100000</td>
                    <td class=""><button class="rm btn btn-danger">删除</button></td>
                </tr>
                <tr>
                    <td class="">张开</td>
                    <td class="">20</td>
                    <td class="">老师</td>
                    <td class="">50000</td>
                    <td class=""><button class="rm btn btn-danger">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>


    <div class="write">
        <form class="form-group" action="">
            姓名：<input type="text" name="" id="name">
            <br>
            年龄：<input type="text" name="" id="age">
            <br>
            部门：<input type="text" name="" id="dep">
            <br>
            薪水：<input type="text" name="" id="sal">
            <br>
            <button class="sub btn btn-default" type='button'>提交</button>
            <button class="finish btn btn-default" type='button'>收起</button>
        </form>
    </div>


</body>

</html>

　　先放作业，第一次周四就写完，而且比较独立。说一说作业中遇到的卡手的地方：

　　首先这个作业是由克隆的基础上演变的，学习了jQuery下绑定和操作属性的步骤，另外还有事件的委派，当时讲的是用on，后来直播讲到一个deligrate。查了一下，好像on是集大成者。给后来增加的元素绑定事件。

　　基本框架，一个表格table，点击添加出来一个form表单。一开始的思路是，先输入，输完提交，把信息对应加到table。

　　问题一，form里面的button，是所有button，一开始以为只是submit，点击之后会刷新页面，超过了现在的范畴，好像是要用到ajax。目前的解决方法，给button加一个type属性就叫button，这样他就是单纯的button了。就解决了刷新页面的问题

　　问题二，往table里插入一行，如果添加节点那也太麻烦了。学到了直接加。上引号是个好东西，直接搬过来。

var $trhtml =
                `<tr>
                    <td class="new1">未填写</td>
                    <td class="new2">未填写</td>
                    <td class="new3">未填写</td>
                    <td class="new4">未填写</td>
                    <td class=""><button class="rm btn btn-danger">删除</button></td>
                 </tr>`;

　　问题三，现在能添加了，但是td里面的值是写死的，本来想通过在td里写标签.val(),后来发现读不出来。然后想的是循环赋值，然后就遇到新问题。当时想先赋值，然后append。可能要用到委派，因为赋值之前要找标签，可是还没添加。于是换思路，先append，把值都写成 “未填写”，然后提交完再把表单信息覆盖上。

　　问题四，一开始循环，两个标签的值都找到了，一个val，一个html，可是赋值就是不行。后来发现，要把值写在html（）的括号里，把for改进成each。初具模型

　　问题五，新增一个标签的时候看不出问题。当时找标签的时候用的class，可是新增的标签class都是new，多点几下新增，就发现问题了，一下都改了，这可不好。想办法，找到最后一行，每次只操作最后一行，之前新增的不管它，让用户自己删那些未填写的。思路可行，百度了一下，语句 $('table tr:last');

　　问题六，确定最后一行之后，就是赋值了。之前是jQuery对象，可是找到的tr是dom对象，只有1个，本来想的是有四个循环的。然后又接着找到tr里的td，还是dom，不能用html（），要用innerHTML赋值。

　　到这里主要的都实现了，然后是一些小细节。比如 hide（）和show（），把form表单隐藏和显示。然后下午继续看视频的时候，讲到了dom对象和jQuery对象的转换，dom转jQuery，直接用$（）包起来。回去试了，把innerHTML换成html（）。jQuery转dom,加[0]。

　　前面说到的先填再append，可能要委派，待会试试。

　　$(document).ready(function(){})可以简写成$(function(){});

posted @ 2018-10-25 16:31 CP喜欢晒太阳阅读(76) 评论(0) 收藏举报

CP喜欢晒太阳

day 12前端之jQuery

公告