jQuery 元素的选中, 置顶、上移、下移、置底、删除
如截图:

<ul>
<li class="li01" onclick="C_columnSetTop(this)"><i></i>置顶</li>
<li class="li02" onclick="C_columnSetMoveUp(this)"><i></i>上移</li>
<li class="li03" onclick="C_columnSetMoveDown(this)"><i></i>下移</li>
<li class="li04" onclick="C_columnSetBottom(this)"><i></i>置底</li>
<li class="li05"><i></i>刷新</li>
<li class="li06" onclick="C_columnSetDel(this)"><i></i>删除</li>
</ul>
<table>
<thead>
<tr>
<th>列名</th>
<th>是否显示</th>
</tr>
</thead>
<tbody class="M_scrollBar">
<tr>
<td>客户状态1</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态2</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态3</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态4</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态5</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
<tr>
<td>客户状态</td>
<td><input type="checkbox" class="R_checkbox"><label></label></td>
</tr>
</tbody>
</table>
<script>
//居中弹框(列设置)删除
function C_columnSetDel(o){
var obj = $(o).parent().next('table').find("tbody tr.P_current");
if(obj.length > 0){
obj.hide();
}else {
win.alert('系统提示', '请选择要【删除】的列!');
}
} //居中弹框(列设置)置底
function C_columnSetBottom(o){
var obj = $(o).parent().next('table').find("tbody tr.P_current");
var list = $(o).parent().next('table').find("tbody tr");
if(obj.length > 0){
var thisLocation = list.index( obj );
if( thisLocation >= list.length - 1 ){
win.alert('系统提示', '已移到最底端了!');
}else {
//console.log (thisLocation);
obj.parent().append(obj); //移动到最底
}
//console.log (list.length);
}else {
win.alert('系统提示', '请选择要【置底】的列!');
}
}
//居中弹框(列设置)下移动
function C_columnSetMoveDown(o){
var obj = $(o).parent().next('table').find("tbody tr.P_current");
var list = $(o).parent().next('table').find("tbody tr");
if(obj.length > 0){
var thisLocation = list.index( obj );
if( thisLocation >= list.length - 1 ){
win.alert('系统提示', '已移到最底端了!');
}else {
//console.log (thisLocation);
obj.next().after(obj); //下移动
}
//console.log (list.length);
}else {
win.alert('系统提示', '请选择要【下移】的列!');
}
} //居中弹框(列设置)置顶
function C_columnSetTop(o){
var obj = $(o).parent().next('table').find("tbody tr.P_current");
var list = $(o).parent().next('table').find("tbody tr");
if(obj.length > 0){
var thisLocation = list.index( obj );
if( thisLocation < 1 ){
win.alert('系统提示', '已移到最顶端了!');
}else {
console.log (thisLocation);
obj.parent().prepend(obj); //移动到最顶
}
}else {
win.alert('系统提示', '请选择要【置顶】的列!');
}
}
//居中弹框(列设置)上移动
function C_columnSetMoveUp(o){
var obj = $(o).parent().next('table').find("tbody tr.P_current");
var list = $(o).parent().next('table').find("tbody tr");
if(obj.length > 0){
var thisLocation = list.index( obj );
if( thisLocation < 1 ){
win.alert('系统提示', '已移到最顶端了!');
}else {
//console.log (thisLocation);
obj.prev().before(obj); //上移动
}
//console.log (list.length);
}else {
win.alert('系统提示', '请选择要【上移】的列!');
}
}
/*客户,列设置*/
$(function(){
$("#C_columnSetList table tbody tr").on('click', function() {
if($(this).hasClass("P_current")){
$(this).removeClass("P_current");
}else {
$(this).addClass("P_current").siblings().removeClass("P_current");
}
});
});
</script>
jQuery 元素的选中, 置顶、上移、下移、置底、删除的更多相关文章
- 表格中上移下移置顶的js操作
<script> $(function(){ //上移 var $up = $(".up") $up.click(function() { var $tr = ...
- MySQL 上移/下移/置顶
在编写网站系统时,难免会用到上移.下移.置顶的功能,今天小编就介绍一下我的思路. 首先,需要一张数据表: CREATE TABLE `a` ( `id` ) NOT NULL AUTO_INCREME ...
- Python tkinter 副窗体置顶和取消置顶
root = Tk() #置顶root.wm_attributes('-topmost',1) #取消置顶 root.wm_attributes('-topmost',0)
- jquery easyui datagrid实现单行的上移下移,以及保存移动的结果
1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...
- listview 点击条目 自动置顶或者自动置底部
关于Listview点击条目,自动滑动到点击条目实现: map_searchresult_list.post(new Runnable() { @Override public void run() ...
- 笔记&想要置顶但懒得置顶的文章目录
1.\(\text{Markdown&Latex}\)学习笔记 2.一些笔记 3.好东西 4.线段树学习笔记 5.并查集学习笔记 6.友链 7.语录
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- jquery——制作置顶菜单
置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- IOS 作业项目 TableView两个section中cell置顶功能实现
点击cell会置顶,其他的下移
随机推荐
- mnsday2t1
枚举每个数的因子,然后该因子数量+1,最后扫描一遍,如果该因子数量小于等于m且该因子在1-n之间就输出 复杂度:枚举因子:O(n^1/2*m) 输出答案 : 大概是O(m*?) 一个不知道的数字 #i ...
- office-excel函数
函数 当前日期 NOW() 取整(商)取余 =)/)&),) 函数计算 上一个月份 =,DAY(TODAY())) 判断两个单元格的内容是否相等 =,) 常用函数有:left函数,right函 ...
- jquery的ajax提交form表单
$.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// ...
- ThreadLocal详解(实现多线程同步访问变量)
ThreadLocal翻译成中文比较准确的叫法应该是:线程局部变量. 这个玩意有什么用处,或者说为什么要有这么一个东东?先解释一下,在并发编程的时候,成员变量如果不做任何处理其实是线程不安全的,各个线 ...
- fastq to tasta using linux shell script
#!/bin/bash usage() { echo " "; echo "############################################### ...
- 【BZOJ-4326】运输计划 树链剖分 + 树上差分 + 二分
4326: NOIP2015 运输计划 Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 703 Solved: 461[Submit][Status] ...
- 【BZOJ-1026】windy数 数位DP
1026: [SCOI2009]windy数 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5230 Solved: 2353[Submit][Sta ...
- 虚拟机软件bochs编译使用问题
bochs是一款具有调试功能的虚拟机软件,由C++编写,可用于调试操作系统.从ubuntu软件源中下载的很可能没有调试功能,需要先下载源码,可能比编译之后的可执行文件大的多. 编译时有很多选项,可以通 ...
- siege详解
简介 siege是一款HTTP/FTP负载测试和基准压测工具 Download http://download.joedog.org/siege/siege-latest.tar.gz 安装 ...
- spring jdbc分离数据库代码和java代码
读取配置文件类 package com.eshore.ismp.contract.sql; import java.io.FileInputStream; import java.io.FileNot ...