使用jquery点击某一列,对那一列以数字大小进行排序 如题:我点击一列的列头,就对那整列进行排序,只是数字的 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你可以查下table排序 不过现在已经有很多这样的库了 可以查查 jquery 有这样的插件搜搜下。 你是用什么控件展示数据的? Web的还是MVC的 这个是我的代码,现在我不知道哪里出问题,点了列头浏览器就崩溃了~~~<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="jquery-1.4.3.js"></script> <script type="text/javascript" src="sorttable.js"></script> <script type="text/javascript" src="jquery-1.5.1.min.js"></script>> </script> <style type="text/css"> /*表格样式*/ .tbData { border-collapse:collapse; border-spacing:0px; border:solid 3px #ddd; font-size:14px; font-family:Consolas; color:#333; background-color:white; margin:10px 0px; } .tbData th, td { border:solid 1px #ddd; padding:5px 8px; } .tbData th { border-bottom:solid 2px #ddd; background-color:#eef; font-weight:normal; color:blue; } #divData .tbData tr:hover { background-color:#fef; } /*分页样式*/ #divPage { text-align:left; margin:10px 0px; height:30px; font-size:12px; } #divPage a, #divPage span { text-decoration:none; color:Blue; background-color:White; padding:3px 5px; font-family:Consolas; text-align:center; border:solid 1px #ddd; display:inline-block; } #divPage span { color:gray; } #divPage a:hover { color:Red; } #divPage .aCur { background-color:green; color:White; font-weight:bold; } </style><script type="text/javascript">$(function(){ //存入点击列的每一个TD的内容; var aTdCont = []; //点击列的索引值 var thi = 0 //重新对TR进行排序 var setTrIndex = function(tdIndex){ for(i=0;i<aTdCont.length;i++){ var trCont = aTdCont[i]; $("tbody tr").each(function() { var thisText = $(this).children("td:eq("+tdIndex+")").text(); if(thisText == trCont){ $("tbody").append($(this)); } }); } } //比较函数的参数函数 var compare_down = function(a,b){ return a-b; } var compare_up = function(a,b){ return b-a; } //比较函数 var fSort = function(compare){ aTdCont.sort(compare); } //取出TD的值,并存入数组,取出前二个TD值; var fSetTdCont = function(thIndex){ $("tbody tr").each(function() { var tdCont = $(this).children("td:eq("+thIndex+")").text(); aTdCont.push(tdCont); }); } //点击时需要执行的函数 var clickFun = function(thindex){ aTdCont = []; //获取点击当前列的索引值 var nThCount = thindex; //调用sortTh函数 取出要比较的数据 fSetTdCont(nThCount); } //点击事件绑定函数 $("th").toggle(function(){ thi= $(this).index(); clickFun(thi); //调用比较函数,降序 fSort(compare_up); //重新排序行 setTrIndex(thi); },function(){ clickFun(thi); //调用比较函数 升序 fSort(compare_down); //重新排序行 setTrIndex(thi); });});</script> <script type="text/javascript"> //js表格 生成表格代码 //arrTh 表头信息 //arrTr 数据 var getTable = function(arrTh, arrTr){ var s = '<table class="tabSort" class="tbData">'; s += '<thead><tr>'; for(var i=0; i<arrTh.length; i++) { s += '<th scope="col">' + arrTh[i] + '</th>'; } s += '</tr></thead>'; for(var i=0; i<arrTr.length; i++) { s += '<tbody><tr>'; for(var j=0; j<arrTr[i].length; j++) { s += '<td>' + arrTr[i][j] + '</td>'; } s += '</tr></tbody>'; } s += '</table>'; return s; } //js分页 //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数 var jsPage = function(el, count, pageStep, pageNum, fnGo) { this.getLink = function(fnGo, index, pageNum, text) { var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ');" '; if(index == pageNum) { s += 'class="aCur" '; } text = text || index; s += '>' + text + '</a> '; return s; } //总页数 var pageNumAll = Math.ceil(count / pageStep); if (pageNumAll == 1) { divPage.innerHTML = ''; return; } var itemNum = 5; //当前页左右两边显示个数 pageNum = Math.max(pageNum, 1); pageNum = Math.min(pageNum, pageNumAll); var s = ''; if (pageNum > 1) { s += this.getLink(fnGo, pageNum-1, pageNum, '上一页'); } else { s += '<span>上一页</span> '; } var begin = 1; if (pageNum - itemNum > 1) { s += this.getLink(fnGo, 1, pageNum) + '... '; begin = pageNum - itemNum; } var end = Math.min(pageNumAll, begin + itemNum*2); if(end == pageNumAll - 1){ end = pageNumAll; } for (var i = begin; i <= end; i++) { s += this.getLink(fnGo, i, pageNum); } if (end < pageNumAll) { s += '... ' + this.getLink(fnGo, pageNumAll, pageNum); } if (pageNum < pageNumAll) { s += this.getLink(fnGo, pageNum+1, pageNum, '下一页'); } else { s += '<span>下一页</span> '; } var divPage = document.getElementById(el); divPage.innerHTML = s; } //js随机内容 var jsRand = {}; //随机数字 jsRand.int = function(min,max){ var Number = Math.floor(Math.random() * (max-min))+min; return Number; } //随机生成3个字母 jsRand.getPass = function(len){ var tmpCh = ""; for(var i = 0;i<len; i++){ tmpCh +=String.fromCharCode(Math.floor(Math.random()*26)+"a".charCodeAt(0)); } return tmpCh; } //求和 jsRand.sum=function(s1,s2,s3,s4,s5,s6,s7,s8){ var sum; sum = s1+s2+s3+s4+s5+s6+s7+s8; return sum;} </script></head><body><h1 style="color:blue">前端练习</h1><div id="divData" style="font-family:Consolas;"></div><div id="divPage"></div><script type="text/javascript"> function goPage(pageIndex) { var arrTh = ['姓名','语文','英语','数学','物理','化学','政治','历史','地理','总分']; var arrTr = []; for(var i=0; i<15; i++) { arrTr.push([ jsRand.getPass(3), s1=jsRand.int(1, 100), s2=jsRand.int(1, 100), s3=jsRand.int(1, 100), s4=jsRand.int(1, 100), s5=jsRand.int(1, 100), s6=jsRand.int(1, 100), s7=jsRand.int(1, 100), s8=jsRand.int(1, 100), jsRand.sum(s1,s2,s3,s4,s5,s6,s7,s8) ]); } document.getElementById('divData').innerHTML = getTable(arrTh, arrTr); jsPage('divPage', 300, 15, pageIndex, 'goPage'); } goPage(1);</script> </body></html> js实现中文之间的代码模式视图, 请教关于IE状态栏的问题(Window.Status) 一段代码,如何用一个函数封装? js表单验证 javascript+dom生成xml 在Div中回车时,自动加了<p>分段标识符,行间距很大,怎么用<br>换行方式??? 视频监控,如何在访问球机IP时,提示需要安装控件? IE全屏问题 在使用showModalDialog的时候,怎么把《--Web页对话况》改成自己的内容呢。。 可不可以把 X 从标题栏上去掉?(急用!请大虾们帮帮忙) Jquery怎样获取网络图片的宽高? 用yui的SWFObject在网页中嵌入flash
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="sorttable.js"></script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>> </script>
<style type="text/css">
/*表格样式*/
.tbData {
border-collapse:collapse;
border-spacing:0px;
border:solid 3px #ddd;
font-size:14px;
font-family:Consolas;
color:#333;
background-color:white;
margin:10px 0px;
}
.tbData th, td {
border:solid 1px #ddd;
padding:5px 8px;
}
.tbData th {
border-bottom:solid 2px #ddd;
background-color:#eef;
font-weight:normal;
color:blue;
}
#divData .tbData tr:hover {
background-color:#fef;
} /*分页样式*/
#divPage {
text-align:left;
margin:10px 0px;
height:30px;
font-size:12px;
}
#divPage a, #divPage span {
text-decoration:none;
color:Blue;
background-color:White;
padding:3px 5px;
font-family:Consolas;
text-align:center;
border:solid 1px #ddd;
display:inline-block;
}
#divPage span {
color:gray;
}
#divPage a:hover {
color:Red;
}
#divPage .aCur {
background-color:green;
color:White;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(function(){
//存入点击列的每一个TD的内容;
var aTdCont = [];
//点击列的索引值
var thi = 0
//重新对TR进行排序
var setTrIndex = function(tdIndex){
for(i=0;i<aTdCont.length;i++){
var trCont = aTdCont[i];
$("tbody tr").each(function() {
var thisText = $(this).children("td:eq("+tdIndex+")").text();
if(thisText == trCont){
$("tbody").append($(this));
}
});
}
}
//比较函数的参数函数
var compare_down = function(a,b){
return a-b;
}
var compare_up = function(a,b){
return b-a;
}
//比较函数
var fSort = function(compare){
aTdCont.sort(compare);
}
//取出TD的值,并存入数组,取出前二个TD值;
var fSetTdCont = function(thIndex){
$("tbody tr").each(function() {
var tdCont = $(this).children("td:eq("+thIndex+")").text();
aTdCont.push(tdCont);
});
}
//点击时需要执行的函数
var clickFun = function(thindex){
aTdCont = [];
//获取点击当前列的索引值
var nThCount = thindex;
//调用sortTh函数 取出要比较的数据
fSetTdCont(nThCount);
}
//点击事件绑定函数
$("th").toggle(function(){
thi= $(this).index();
clickFun(thi);
//调用比较函数,降序
fSort(compare_up);
//重新排序行
setTrIndex(thi);
},function(){
clickFun(thi);
//调用比较函数 升序
fSort(compare_down);
//重新排序行
setTrIndex(thi);
});
});
</script>
<script type="text/javascript">
//js表格 生成表格代码
//arrTh 表头信息
//arrTr 数据
var getTable = function(arrTh, arrTr){
var s = '<table class="tabSort" class="tbData">';
s += '<thead><tr>';
for(var i=0; i<arrTh.length; i++) {
s += '<th scope="col">' + arrTh[i] + '</th>';
}
s += '</tr></thead>';
for(var i=0; i<arrTr.length; i++) {
s += '<tbody><tr>';
for(var j=0; j<arrTr[i].length; j++) {
s += '<td>' + arrTr[i][j] + '</td>';
}
s += '</tr></tbody>';
}
s += '</table>';
return s;
} //js分页
//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数
var jsPage = function(el, count, pageStep, pageNum, fnGo) {
this.getLink = function(fnGo, index, pageNum, text) {
var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ');" ';
if(index == pageNum) {
s += 'class="aCur" ';
}
text = text || index;
s += '>' + text + '</a> ';
return s;
}
//总页数
var pageNumAll = Math.ceil(count / pageStep);
if (pageNumAll == 1) {
divPage.innerHTML = '';
return;
}
var itemNum = 5; //当前页左右两边显示个数
pageNum = Math.max(pageNum, 1);
pageNum = Math.min(pageNum, pageNumAll);
var s = '';
if (pageNum > 1) {
s += this.getLink(fnGo, pageNum-1, pageNum, '上一页');
} else {
s += '<span>上一页</span> ';
}
var begin = 1;
if (pageNum - itemNum > 1) {
s += this.getLink(fnGo, 1, pageNum) + '... ';
begin = pageNum - itemNum;
}
var end = Math.min(pageNumAll, begin + itemNum*2);
if(end == pageNumAll - 1){
end = pageNumAll;
}
for (var i = begin; i <= end; i++) {
s += this.getLink(fnGo, i, pageNum);
}
if (end < pageNumAll) {
s += '... ' + this.getLink(fnGo, pageNumAll, pageNum);
}
if (pageNum < pageNumAll) {
s += this.getLink(fnGo, pageNum+1, pageNum, '下一页');
} else {
s += '<span>下一页</span> ';
}
var divPage = document.getElementById(el);
divPage.innerHTML = s;
} //js随机内容
var jsRand = {};
//随机数字
jsRand.int = function(min,max){
var Number = Math.floor(Math.random() * (max-min))+min;
return Number;
} //随机生成3个字母
jsRand.getPass = function(len){
var tmpCh = "";
for(var i = 0;i<len; i++){
tmpCh +=String.fromCharCode(Math.floor(Math.random()*26)+"a".charCodeAt(0));
}
return tmpCh;
}
//求和
jsRand.sum=function(s1,s2,s3,s4,s5,s6,s7,s8){
var sum;
sum = s1+s2+s3+s4+s5+s6+s7+s8;
return sum;
}
</script>
</head>
<body>
<h1 style="color:blue">前端练习</h1>
<div id="divData" style="font-family:Consolas;"></div>
<div id="divPage"></div>
<script type="text/javascript">
function goPage(pageIndex) {
var arrTh = ['姓名','语文','英语','数学','物理','化学','政治','历史','地理','总分'];
var arrTr = [];
for(var i=0; i<15; i++)
{
arrTr.push([
jsRand.getPass(3),
s1=jsRand.int(1, 100),
s2=jsRand.int(1, 100),
s3=jsRand.int(1, 100),
s4=jsRand.int(1, 100),
s5=jsRand.int(1, 100),
s6=jsRand.int(1, 100),
s7=jsRand.int(1, 100),
s8=jsRand.int(1, 100),
jsRand.sum(s1,s2,s3,s4,s5,s6,s7,s8)
]);
}
document.getElementById('divData').innerHTML = getTable(arrTh, arrTr);
jsPage('divPage', 300, 15, pageIndex, 'goPage');
}
goPage(1);
</script>
</body>
</html>