zoukankan      html  css  js  c++  java
  • jq中append()、prepend()、after()、before()的区别详解

    1、append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标签之前添加东西)

    2、prepend() - 在被选元素的开头插入内容(内容的开始,比如说有个a标签,则是在<a>这个标签之后添加东西)

    3、after() - 在被选元素之后插入内容(元素的结尾,比如说有个a标签,则是在</a>这个标签之后添加东西)

    4、before() - 在被选元素之前插入内容(内容的开始,比如说有个a标签,则是在<a>这个标签之前添加东西)

    所以我们经常用的表格元素的添加,一般用apend 和prepend ,因为是在</table>标签之前。

    比如 btn1 和btn3两个按钮,两个表格,未上传 nouploaded和已上传uploaded。 未上传表中选中,一行或者几行,按btn1,那么将这几行数据移动到已上传的表中。

    在已上传的表中,选中一行或者几行,按btn3,几行数据移动到未上传的表中。

    $(document).ready(function(){

    $("#btn1").on("click",function(){

    $('#nouploaded tbody :checked').parents('tr').appendTo('#uploaded');
    $("input[type=checkbox]").each(function(){ //循环checkbox选择或取消
    $(this).prop("checked",false);
    })
    $("#nouploaded tbody :checked").parents('tr').remove();
    })
    $("#btn3").on("click",function(){
    $('#uploaded tbody :checked').parents('tr').appendTo('#nouploaded');
    $("input[type=checkbox]").each(function(){ //循环checkbox选择或取消
    $(this).prop("checked",false);
    })
    $("#uploaded tbody :checked").parents('tr').remove();

    })


    })

    $(function(){

    /**
    * 鼠标移到的颜色
    */
    $("table tr").mouseover(function(){
    $(this).find("td").addClass("mouse_color");
    });

    /**
    * 鼠标移出的颜色
    */
    $("table tr").mouseout(function(){
    $(this).find("td").removeClass("mouse_color");
    });


    //点击一行加色选中checkbox
    $("tbody tr").click(function() {
    var hasSelected = $(this).hasClass("blue");
    $(this)[hasSelected ? "removeClass" : "addClass"]("blue").find(":checkbox").prop("checked", !hasSelected);

    })
    })

    function selectAll1(){
    var isCheck=$("#sel_1").is(':checked'); //获得全选复选框是否选中

    $("#nouploaded input[type='checkbox']").each(function() {
    this.checked = isCheck; //循环赋值给每个复选框是否选中
    if(isCheck==true){
    $(this).parent().parent().addClass('blue');
    }else{
    $(this).parent().parent().removeClass('blue');
    }


    });

    }
    function selectAll2(){

    var isCheck=$("#sel_2").is(':checked'); //获得全选复选框是否选中
    $("#uploaded input[type='checkbox']").each(function() {
    this.checked = isCheck; //循环赋值给每个复选框是否选中
    if(isCheck==true){
    $(this).parents('tr').addClass('blue');
    }else{
    $(this).parents('tr').removeClass('blue');
    }

    });
    }

  • 相关阅读:
    团队管理 - 团队发展五阶段
    信息系统开发平台OpenExpressApp - 支持差异保存
    MDSF:Mendix介绍
    需求入门 - 获取需求方法:Nine Boxes
    个人管理 - 第四代时间管理
    需求入门 - 业务需求分析入门(公司研发峰会演讲ppt)
    个人管理 - Learn More,Study Less!
    如何培养一个人:从育儿谈起
    个人管理 - 如何演讲
    企业架构 - ADM方法概要介绍
  • 原文地址:https://www.cnblogs.com/jiangshengxiang/p/8550986.html
Copyright © 2011-2022 走看看