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

});
}

jq中append()、prepend()、after()、before()的区别详解的更多相关文章

  1. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  2. jsp中的@include与jsp:include区别详解

    1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...

  3. JS中escape()、encodeURI()、encodeURIComponent()区别详解

    avaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decode ...

  4. php中const与define的使用区别 详解

    1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...

  5. java中==和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  6. css中postion的fixed与absolute区别详解

    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...

  7. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  8. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  9. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  10. Android中Intent传值与Bundle传值的区别详解

    Android中Intent传值与Bundle传值的区别详解 举个例子我现在要从A界面跳转到B界面或者C界面   这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两 ...

随机推荐

  1. python四个带 key 参数的函数(max、min、map、filter)

    四个带 key 参数的函数: max()点击查看详细 min()点击查看详细 map()点击查看详细 filter()点击查看详细 1)max(iterable, key) key:相当于对可迭代对象 ...

  2. ios 避免两个button同一时候被点击

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/superchaoxian/article/details/24631293 这个能够通过[btn   ...

  3. 003-ARP地址解析协议

    一.概念 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/IP协议.主机发送信息时将包含目标IP地址的ARP请求广播到网络上的 ...

  4. make menuconfig 时出现 mixed implicit and normal rules: deprecated syntax

    這是 make 的版本問題!不清楚為何要這樣限制? 將此行          config %config: scripts_basic outputmakefile FORCE改成          ...

  5. LVC函数重要参数 EDT_CLL_CB:退出可编辑单元格时回调

    6. I_GRID_SETTINGS 参数属性该参数用于设置Grid相关参数(打印.单元格回调):类型为:LVC_S_GLAY,该结构包括:01) COLL_TOP_P:最小化 TOP_OF_PAGE ...

  6. 部署Jenkins+docker集成环境

    环境: 主机(mac osx)和虚拟机(Ubuntu 16.04) mac osx系统,运行Jenkins Ubuntu16.04系统,运行docker(用Ubuntu14.04镜像创建一个docke ...

  7. LeetCode-day04

    35. Same Tree 判断两棵树相同 36. Invert Binary Tree 翻转树 37. Symmetric Tree 判断树是不是镜像对称的 38. Maximum Depth of ...

  8. java动手动脑解析

    1. 类是java的最小单位,java的程序必须在类中才能运行 2. java函数加不加static有何不同 java中声明为static的方法称为静态方法或类方法.静态方法可以直接调用静态方法,访问 ...

  9. C#加快Bitmap的访问速度

    在对Bitmap图片操作的时候,有时需要用到获取或设置像素颜色方法:GetPixel 和 SetPixel, 如果直接对这两个方法进行操作的话速度很慢,这里我们可以通过把数据提取出来操作,然后操作完在 ...

  10. 静态库引入引起的错误解决方案,ld: warning: ignoring file ”…/XXX.a”, file was built for archive which is not the architecture being linked (armv7): “…/XXX.a” Undefined symbols for architecture armv7: "_OBJC_CLASS_$

    想目中不免会引入一些静态库,可是有时加入'.a'文件后编译便会报以下错误 ld: warning: ignoring file ”…/XXX.a”, file was built for archiv ...