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

    });
    }

  • 相关阅读:
    JSP动作元素<jsp:include>和<jsp:param>的搭配使用
    js去除字符串中的空格
    js 判断字符串中是否包含某个字符串(转载)
    window+R
    eclipse中ctrl+K失效
    图片转二进制——各种方法汇总(转载)
    spring mvc使用ModelAndView时发生No request handling method with name '方法 名' in class [类名]的错误
    类中main函数的快捷创建
    java中的中文字符转码技术
    SPOJ QTREE6
  • 原文地址:https://www.cnblogs.com/jiangshengxiang/p/8550986.html
Copyright © 2011-2022 走看看