jquery实现增删改（伪）-老男孩作业day13

最新推荐文章于 2020-09-24 16:03:27 发布

weixin_33730836

最新推荐文章于 2020-09-24 16:03:27 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/taozizainali/p/8629138.html

版权

使用jquery进行，文件的编写，实现自增id,删除，添加，编辑模式。
jquery放在本地，src="jquery_js.js" 可以改成其他，或者在线的路径

readme

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出输入，增删改查</title>
    <script src="jquery_js.js"></script>
    <style>
        .under{
            height: 1000px;
            background-color: white;
        }

        .add{
            width: 100%;
            background-color: white;
            height:1000px;
            opacity: 0.8;      /*透明度的问题，加跟北京一样的颜色，覆盖掉最底部的颜色，然后调透明度。*/
            /*position: fixed;*/
            /*margin-top: 0px;*/
            top: 0px;
            position: fixed;
            z-index: 778;
        }
        .hide{
            display:none;
        }
        #f{
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 888;
            background-color: white;
            opacity: 1;

        }

        #f p{


        }

    </style>
</head>
<body>
<div class="under">
    <div class="z1"><button type="button">新增</button></div>
    <table border="1">
        <thead>
            <tr>
                <td>#</td>
                <td>姓名</td>
                <td>爱好</td>
                <td>操作</td>
            </tr>

        </thead>
        <tbody class="tbody">
            <tr class="test">
                <td class="fix">1</td>
                <td >周奕明</td>
                <td>play</td>
                <td><button class="edit" type="button">编辑</button>
               <button class="del">删除</button></td>


        </tbody>



    </table>
</div>
<div class="add hide">
    <form id="f" action="">
        <p>名字:<input type="text" value=""></p>


        <p>爱好:<input type="text" value=""></p>

        <!--<button class="put_up" style="margin-left:30px " type="button">提交</button>-->
        <button class="put_up" style="margin-left:30px " type="button" value="提交">提交</button>

        <button class="clear" style="margin-left: 20px" type="button">清空</button>
        <button class="quit" style="margin-left: 20px">退出</button>

    </form>
</div>




<script>
    <!--新增的函数-->
    $('.z1 button').click(function () {
        $('.add').removeClass('hide');
    })
//    提交的函数,新增
    $('.put_up').click(function () {
        var user_put = $($('.add input')[0]).prop('value')
        var hobby_put =  $($('.add input')[1]).prop('value')
        var arr=[];
            arr.push(user_put)
            arr.push(hobby_put)


         num2 = $('.tbody tr').length
        s= '<tr> <td class="fix">num</td> <td>user</td> <td>hobby</td> <td> <button class="edit" type="button">编辑</button> <button class="del">删除</button> </td></tr>'
        s= s.replace('num',num2+1)
        s= s.replace('user',user_put)
        s=s.replace('hobby',hobby_put)
        $('.add').addClass('hide')
        $('.tbody').append(s)
        edit()                //这时候由于绑定是在定义的时候发生的，所以需要重新执行一下
        del()

    })

//    清空的函数
    $('.clear').click(function () {
            $('.add input').prop('value','');


    })

//    退出的函数
    $('.quit').click(function () {
        $('.add').addClass('hide');

    })

//编辑

    function edit() {

     $('.edit').click(function () {
            console.log($('.edit'))
            console.log(this)
            fix = $('.fix')
            console.log($(this).parent().prevUntil(fix,'td'))  //!!fix是dom对象或者jquery对象，td是属性的标签，until不包含尾部
            temp = $(this).parent().prevUntil(fix,'td')
            temp.html('<input type="text">')
        })}
        edit()
//删除
    function del() {
        $('.del').click(function () {
            console.log($(this).parent().parent())
            console.log( $('.tbody'))
            $(this).parent().parent().remove()   //删除标签
//            $('.tbody').remove($(this).parent().parent())
//            $('tr').remove('$(this).parent().parent()');
//            console.log($(this).parent().parent())
            so_rt()
        })

    }

    function so_rt() {
        for (var k=0;k<$('.fix').length;k++){
            $($('.fix')[k]).text(k+1)   //双$$符的用途，因为取出的是一个组的形式，拿出的是dom对象，然后在jquery
            console.log('start_sort')
        }
    }


//        del()



</script>



</body>
</html>

<!--比较麻烦的点在于，1.添加的时候的自增id的问题，2.添加的时候，将你想要添加的节点做成模版的状态，之后在向里面传值，3.设置隐藏之类的属性的时候，
先定义一个类，在script内写命令，将这个类添加到想获得这个属性的classlist中，4,在改的时候，将元素类型切换，变成input形式-->

<!--在进行自增id功能的实现的时候，开始构想的是查找#标签的数量,然后添加的时候进行+1操作，但是在进行删除操作的时候，一旦删除中间的那个，之后添加会出现相同id的情况-->
<!--想法一：在添加操作中，for循环剔除重复的id，然后进行重新排序.这种id可以不变，这种（暂时没有搞）-->
<!--想法二：直接将序号列，重新排序，在删除，添加操作之后.这种id变化。#