jQuery Implement Complete Example of Adjusting Table Single Column Order
- 2021-06-29 09:46:18
- OfStack
An example of how jQuery can adjust the order of table columns is given.Share it for your reference, as follows:
<!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> Adjust table order </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();// Show or hide the table settings panel
showResult(); // When the document is loaded , Show the data in the table to the panel first
$(".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(){ // Put the first of the columns in the table 1 Rows are displayed in the panel
cols.length = 0;
$("#tab tr:first td").each(function(i){
var col = $("#tab tr td::nth-child("+(i+1)+")") // Will each 1 Columns are stored in arrays cols in
cols.push(col);
$("#tdList").html(getResult($(cols))); // Add to Panel
$(".sortTd").click(function(){
$(".sortTd").css("background-color","")
$(this).css("background-color","red");
index = parseInt($(this).attr("id"));
})
})
}
function show_Hide_tipBtn(){
$("#tab").mouseover(function(){ // When the mouse moves over a table , Show pop-up button
$("#showDetail").css("display","block");
}).mouseout(function(){ // When the mouse moves over a table , Hide pop-up buttons
$("#showDetail").css("display","none");
})
$("#showDetail").mouseover(function(){ // When the mouse moves over the pop-up button , Show pop-up button
$(this).css("display","block");
}).mouseout(function(){ // When the mouse moves over the pop-up button , Hide pop-up buttons
$(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>
More readers interested in jQuery-related content can view this site's topics: Summary of jQuery Table (table) Operational Skills, Summary of jQuery Common Plug-ins and Usages, Summary of Ajax Usage in jquery, Summary of jQuery Drag-and-Drop Effects and Skills, Summary of jQuery Extension Skills, Summary of jQuery Common Classic Special Effects,jQuery Animation and Utility Summary and jquery Selector Usage Summary
I hope that the description in this paper will be helpful to everyone's jQuery program design.