jQ的增删改查

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            a{

                text-decoration: none;

                cursor: pointer;

                color: palevioletred;

            }

        </style>

    </head>

    <body>

        <a href="javascript:addUser();">添加用户</a>

        <input type="text" id="findInp"/>

        <a id="findUser">查找用户</a>

        <table border="1" cellspacing="0" cellpadding="3">

            <tr>

                <th>ID</th>

                <th>用户名</th>

                <th>密码</th>

                <th>操作</th>

            </tr>

            <tr>

                <td>1001</td>

                <td>张三</td>

                <td>123asd</td>

                <td>

                    <a id="up">更新</a>

                    <a id="del">删除</a>

                    <a class="up">上移</a>

                    <a class="down">下移</a>

                </td>

            </tr>

            <tr>

                <td>1002</td>

                <td>李四</td>

                <td>456zxc</td>

                <td>

                    <a id="up">更新</a>

                    <a id="del">删除</a>

                    <a class="up">上移</a>

                    <a class="down">下移</a>

                </td>

            </tr>

        </table>

        <div id="addUser" style="display: none;">

            <form>

                ID:(只能是数字) <br />

                <input type="number" id="uid"/><br />

                用户名:(只能是汉字) <br />

                <input type="text" id="user"/><br />

                密码:(英文+数字或下划线,长度不小于6) <br />

                <input type="text" id="pwd"/><br />

                <a id="btn-add">提交</a>

                <a id="btn-update">更新</a>

                <a id="cancel">取消</a>

            </form>

        </div>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/prac1.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//删除当前行

//用事件委托实现,否则点击一次后会失效

$('table').on('click','#del',function(){

    $(this).parents('tr').remove();

    //$(this).parent().parent().remove(); 同上

    //parent() parents()的区别就是前者获取的只有它的上一级元素

    //后者把它的所有上级元素都获取了,不过可以明确指定获取哪一级

});

//初始化

function init(){

    $('input').val('');

};

//显示隐藏的表单框

function addUser(){

    init();

    //show()里面的参数是动画执行的时间,可有可无,也可加一个回调函数,hide()同理

    $('#addUser').show(1000);

    $('#btn-add').show();

    $('#btn-update').hide();

    console.log($('#uid').val());

};

$('#cancel').click(function(){

    $('#addUser').hide(1000);

    init();

});

//提交验证

//定义一个全局变量,判断操作是否成功

var result=false;

$('#btn-add').click(function(){

    msg();

    if(result){

        $('#addUser').hide(1000);

    }

})

function msg(){

    var val1=$('#uid').val();

    var val2=$('#user').val();

    var val3=$('#pwd').val();

    //正则验证

    var reg_user = /^[\u0391-\uFFE5]+$/;

    var reg_pwd = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;

    if(val1==''){

        result=false;

        alert('请输入ID')

    }else if(val2==''){

        result=false;

        alert('请输入用户名')

    }else if(val3==''){

        result=false;

        alert('请输入密码')

    }else if(!reg_user.test(val2)){

        result=false;

        alert('用户名格式不正确')

    }else if(!reg_pwd.test(val3)){

        result=false;

        alert('密码格式不正确')

    }else{

        result=true;

    };

    if(result){

        push();

    };

}

//把信息添加到相应表格内

function push(){

    //创建tr节点

    var $tr=$('<tr></tr>')

    //遍历获取input中的内容依次填到td中

    //第一个参数是索引,第二个参数是数据对象

    //如果是json格式的话,第一个参数是键,第二个是值

    $('form input').each(function(index,domEle){

        //添加td节点

        var $td=$('<td></td>');

        //将内容循环添加到创建好的td中

        $td.append($(domEle).val());

        //将td添加到创建的tr中

        $td.appendTo($tr);

    });

    //创建td的删除更新按钮

    var $td=$("<td><a id='up'>更新</a> <a id='del'>删除</a> <a class='up'>上移</a> <a class='down'>下移</a></td> ");

    $td.appendTo($tr);

    //最后将创建的tr插入到table中的最后一个位置

    $tr.appendTo('table');

}

//更新操作

//定义全局变量,用于存放要修改的行号

var row=0

$('table').on('click','#up',function(){

    $('#addUser').show(1000);

    $('#btn-add').hide();

    $('#btn-update').show();

    //获取最后一个td前面所有的td节点

    var val=$(this).parent().prevAll();

    var arr=[];

    //通过循环将所有td里面的文本放到数组里面

    for(var i=0;i<val.length;i++){

        arr[arr.length]=val.eq(i).text();

    };

    //得到的arr数组与表格顺序相反

    //将arr数组逆序与表格顺序相同,以便依次填到input中

    var arr1=arr.reverse();

    for(var j=0;j<$('form input').length;j++){

        $('form input').eq(j).val(arr1[j])

    };

    //i是该行所在的行号

    var i=$('table').find("tr").index(val.parent()[0]);

    console.log(i);

    row=i;

});

//更新验证

$('#btn-update').on('click',function(){

    console.log($(this));

    msg();

    $('#addUser').hide(1000);

    //过滤器 过滤索引,过滤出行号为row的tr,并移除

    $('tr').filter(function(index){

        return index==row

    }).remove();

});

//查找操作

$('#findUser').on('click',function(){

    //记录Input框中输入的值用于查找

    var val=$('#findInp').val();

    console.log(val);

    var arr=[];

    //通过循环将第一列td的值存入到数组中

    for(var i=0;i<$("tr").find("td:first").length;i++){

        arr[arr.length]=$("tr").find("td:first").eq(i).text();

    };

    //通过循环判断input中输入的值,在表格中是否存在

    for(var j=0;j<arr.length;j++){

        if(arr[j]==val){

            result=true

            //记录其所在的行号

            var z=j;

        }

    };

    //置顶操作

    //如果存在的话,就将该行置顶

    if(result){

        console.log(z);

//      $('tr:nth-child('+z+1+')').css('background-color','#2D93CA');同下两行

        var $tr=$('tr').eq(z+1)

        $tr.css('background-color','#2D93CA');

        //淡入淡出的一个动画

        $tr.fadeOut().fadeIn();

        //prepend() 在被选元素的开头插入指定的内容

        $('table').prepend($tr);

    }

    else{

        alert('不存在该用户,请确认您输入的ID是否正确')

    }

})

//上移操作

$('table').on('click','.up',function(){

    //.parents('tr') 找到父亲为tr的节点

    var $tr=$(this).parents('tr');

    console.log($tr);

    //判断当前行是否是第一行

    if($tr.index()!=0){

        $tr.fadeOut().fadeIn();

        //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素

        //before() 在被选元素的前面插入指定的内容

        $tr.prev().before($tr);

    }

})

//下移操作

$('table').on('click','.down',function(){

    //获取一共多少行

    var length1=$('tr').length;

    var $tr=$(this).parents('tr');

    console.log(length1);

    //如果当前行是最后一行,则不再往下移

    if($tr.index()!=length1-1){

        $tr.fadeOut().fadeIn();

        //next() 获得匹配元素集合中每个元素紧邻的后一个同胞元素

        //after() 在被选元素的后面插入指定的内容

        $tr.next().after($tr);

    }

})

</script>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 140,856评论 1 295
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,475评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 92,639评论 0 208
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,628评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,311评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,533评论 1 167
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,235评论 2 266
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,017评论 0 161
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,738评论 6 225
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,358评论 0 211
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,115评论 2 211
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,444评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,138评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 26,965评论 2 209
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,349评论 3 200
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,574评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,901评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,314评论 2 227
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,433评论 2 228

推荐阅读更多精彩内容