jQuery实现调整表格单列顺序完整实例
本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>调整表格顺序</title>
<script type = "text/javascript" src="jquery-1.7.2.js"></script>
<style type = "text/css">
#main{
width:800px;
height:400px;
margin:auto;
text-align:center;
border:1px solid red;
background:#eee;
padding-top:100px;
}
#tabf{
height:170px;
position:relative;
}
#showDetail{
left:244px;
width:20px;
height:15px;
line-height:15px;
border-left:1px solid blue;
border-top:1px solid blue;
border-right:1px solid blue;
cursor:pointer;
display:none;
position:absolute;
}
#tab{
margin-top:16px;
border-collapse:collapse;
position:absolute;
}
#tab td{
height:50px;
width:50px;
line-height:50px;
border:1px solid blue;
}
#sortTab{
width:170px;
height:155px;
border:3px outset;
background:#ccc;
position:absolute;
top:15px;
left:270px;
display:none;
}
#tdList{
width:90px;
height:150px;
border:1px inset;
position:absolute;
}
#opt{
width:80px;
height:150px;
position:absolute;
left:90px;
}
.btn{
margin:10px;
width:60px;
height:20px;
}
</style>
<script type = "text/javascript">
$(function(){
index = 0;
cols = new Array();
show_Hide_tipBtn();//显示或隐藏表格设置面板
showResult(); //文档加载完毕时,先将表格中的数据显示到面板中
$(".up").click(function(){
sortColumn(cols,index,"tab","up")
showResult()
$(".sortTd").each(function(m){
if(m==index){
$(this).css("background-color","red");
}else{
$(this).css("background-color","")
}
})
})
$(".down").click(function(){
sortColumn(cols,index,"tab","down")
showResult()
$(".sortTd").each(function(m){
if(m==index){
$(this).css("background-color","red");
}else{
$(this).css("background-color","")
}
})
})
})
function getResult(cols){
var result = "";
cols.each(function(n){
result += "<span style = 'margin-top:10px;border:1px solid;display:block' id='"+n+"' class='sortTd'>"+$(this).text()+"</span>";
})
return result;
}
function showResult(){ //将表格中各列的第一行显示到面板中
cols.length = 0;
$("#tab tr:first td").each(function(i){
var col = $("#tab tr td::nth-child("+(i+1)+")") //将每一列分别存入数组cols中
cols.push(col);
$("#tdList").html(getResult($(cols))); //添加到面板
$(".sortTd").click(function(){
$(".sortTd").css("background-color","")
$(this).css("background-color","red");
index = parseInt($(this).attr("id"));
})
})
}
function show_Hide_tipBtn(){
$("#tab").mouseover(function(){ //鼠标移入到表格上时,显示弹出按钮
$("#showDetail").css("display","block");
}).mouseout(function(){ //鼠标移入到表格上时,隐藏弹出按钮
$("#showDetail").css("display","none");
})
$("#showDetail").mouseover(function(){ //鼠标移入到弹出按钮上时,显示弹出按钮
$(this).css("display","block");
}).mouseout(function(){ //鼠标移入到弹出按钮上时,隐藏弹出按钮
$(this).css("display","none");
})
$("#showDetail").click(function(){
$("#sortTab").slideToggle("slow");
})
}
function sortColumn(col, t, faId, dir){
if (((t == 0) && (dir == "up")) || ((t == col.length-1) && (dir == "down"))) {
return false;
}
else {
var k = t;
var idx = 0;
if (dir == "up") {
idx = k - 1;
}
else
if (dir == "down") {
idx = k + 1;
}
var temp = null;
temp = col[idx];
col[idx] = col[k];
col[k] = temp;
$("#" + faId + " tr").each(function(){
$(this).remove();
})
var trs = col[0].length;
for (var j = 0; j < trs; j++) {
var tr = $("<tr></tr>")
$(col).each(function(){
tr.append($($(this)[j]));
})
$("#" + faId).append(tr);
}
index = idx;
//return col;
}
}
</script>
</head>
<body>
<div id = "main">
<div id = "tabf">
<div id = "showDetail">></div>
<table id = "tab">
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<div id = "sortTab">
<div id = "tdList"></div>
<div id = "opt">
<input type = "button" value = "UP" class = "btn up"/><br/>
<input type = "button" value = "DOWN" class = "btn down"/><br/>
</div>
</div>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
基于jQuery的动态表格插件
在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库.本插件则简单的处理了这些繁琐的事情. 插件属性说明: 1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class.在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯
-
jQuery 选择表格(table)里的行和列及改变简单样式
jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三
-
jquery调整表格行tr上下顺序实例讲解
表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t
-
jQuery 表格隔行变色代码[修正注释版]
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
基于jquery的动态创建表格的插件
废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&
-
jQuery实现的调整表格行tr上下顺序
表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们<
-
基于jquery的表格排序
很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的. 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件. 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,
-
jQuery操作表格（table）的常用方法、技巧汇总
以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover')}, function(){ $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()
-
jquery实现更改表格行顺序示例
表格部分如下: 复制代码 代码如下: <table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </th
-
使用jquery写个更改表格行顺序的小功能
周末写了个更改表格行顺序的小功能,直接贴代码 表格部分如下: 复制代码 代码如下: <table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <tr cid=