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');
    }

    });
    }

  • 相关阅读:
    从零搭建 jenkins 自动部署 java maven项目
    win10 Unistack 服务组 占用资源如何解决
    如何在CentOS上部署Nginx及vsftpd!
    在VS2015 添加自定义模版内容
    短信查询银行开户行信息
    oracle 数据库信息查询
    Hibernate学习---第十五节:hibernate二级缓存
    Hibernate学习---第十四节:hibernate之session线程安全
    Hibernate学习---第十三节:hibernate过滤器和拦截器的实现
    Hibernate学习---第十二节:Hibernate之锁机制&乐观锁实现
  • 原文地址:https://www.cnblogs.com/jiangshengxiang/p/8550986.html
Copyright © 2011-2022 走看看