[Java教程]JS学习之表格的排序

0 2016-05-16 12:00:07 1 2 3

4 5 6 7 8 9

2	张三	20
4	李四	25
3	赵龙	30
1	孙河	21

38 56 57

这里的sort很方便，但是有一个小问题，如：ali=document.getelementbyid(li)   这里的ali严格意义上并不是一个标准的Array，所以sort并不能直接对ali使用。我们用一个arr来实现一个巧妙的转换。这样只要点击排序按钮，表格就会按照从大到小的顺序排列啦

本文网址：http://www.shaoqun.com/a/222227.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0

privateJButtongetJButtonOK(){if(jButtonOK==null){jButtonOK=newJButton();jButtonOK.setBounds(newRectangle(20,32,100,22));jButtonOK.setText("按姓名排序");jButtonOK.addMouse...

private JButton getJButtonOK() {

if (jButtonOK == null) {

jButtonOK = new JButton();

jButtonOK.setBounds(new Rectangle(20, 32, 100, 22));

jButtonOK.setText("按姓名排序");

jButtonOK.addMouseListener(new java.awt.event.MouseAdapter() {

public void mouseClicked(java.awt.event.MouseEvent e) {

try {

TurnSQL();

} catch (Exception e1) {

// TODO 自动生成 catch 块

e1.printStackTrace();

} // TODO Auto-generated Event stub mouseClicked()

}

private void TurnSQL() throws Exception {

Statement stmt=null;

ResultSet rs=null;

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con=DriverManager.getConnection("jdbc:odbc:sun","","");

stmt=con.createStatement();

rs=stmt.executeQuery("Select * From StuInfo ORDER BY Num");

stmt.executeUpdate();

stmt.close();

con.close();

MainForm.Reflesh();

getJFrame().dispose();

}

});

}

stmt.executeUpdate();这个括号里该填什么？

如果要以Num这列来对表格排序 并且在表格上更新显示排序后的结果 代码该怎么写？

要不直接给个Access数据库 表格排序代码也行

展开

 表格排序 

p {

width: 1024px;

margin: 0 auto;

/*p相对屏幕左右居中*/

}

table {

border: solid 1px #666;

border-collapse: collapse;

width: 100%;

cursor: default;

}

tr {

border: solid 1px #666;

height: 30px;

}

table thead tr {

background-color: #ccc;

}

td {

border: solid 1px #666;

}

th {

border: solid 1px #666;

text-align: center;

cursor: pointer;

}

.sequence {

text-align: center;

}

.hover {

background-color: #3399FF;

}

序号书名价格(元)出版时间印刷量(册)IP

1狼图腾29.802009-1050000192.168.1.1252孝心不能等待29.802009-09800192.68.1.1253藏地密码228.002008-10192.102.0.124藏地密码124.802008-10215.34.126.105设计模式之禅69.002011-12192.168.1.56轻量级 Java EE 企业应用实战99.002012-045000192.358.1.1257Java 开发实战经典79.802012-012000192.168.1.258Java Web 开发实战经典69.802011-112500215.168.54.125

$(document).ready(function() {

var tableObject = $('#tableSort'); //获取id为tableSort的table对象

var tbHead = tableObject.children('thead'); //获取table对象下的thead

var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th

var tbBody = tableObject.children('tbody'); //获取table对象下的tbody

var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr

var sortIndex = -1; //初始化索引

tbHeadTh.each(function() { //遍历thead的tr下的th

var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号

//鼠标移除和聚焦的效果，不重要

$(this).mouseover(function() { //鼠标移开事件

tbBodyTr.each(function() { //编列tbody下的tr

var tds = $(this).find("td"); //获取列号为参数index的td对象集合

$(tds[thisIndex]).addClass("hover");

});

}).mouseout(function() { //鼠标聚焦时间

tbBodyTr.each(function() {

var tds = $(this).find("td");

$(tds[thisIndex]).removeClass("hover");

});

});

$(this).click(function() { //鼠标点击事件

var dataType = $(this).attr("type"); //获取当前点击列的 type

checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 (当前索引，排序类型)

});

});

//显示效果，不重要

$("tbody tr").removeClass(); //先移除tbody下tr的所有css类

$("tbody tr").mouseover(function() {

$(this).addClass("hover");

}).mouseout(function() {

$(this).removeClass("hover");

});

//对表格排序

function checkColumnValue(index, type) {

var trsValue = new Array(); //创建一个新的列表

tbBodyTr.each(function() { //遍历所有的tr标签

var tds = $(this).find('td'); //查找所有的 td 标签

//将当前的点击列 push 到一个新的列表中

//包括 当前行的 类型、当前索引的 值，和当前行的值

trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this)

.html());

$(this).html(""); //清空当前列

});

var len = trsValue.length; //获取所有要拍戏的列的长度

if (index == sortIndex) { //sortIndex =-1

trsValue.reverse(); //???

} else {

for (var i = 0; i 

type = trsValue[i].split(".separator")[0]; // 获取要排序的类型

for (var j = i + 1; j 

value1 = trsValue[i].split(".separator")[1]; //当前值

value2 = trsValue[j].split(".separator")[1]; //当前值的下一个

if (type == "number") {

//js 三元运算  如果 values1 等于 '' (空) 那么，该值就为0，否则 改值为当前值

value1 = value1 == "" ? 0 : value1;

value2 = value2 == "" ? 0 : value2;

//parseFloat() 函数可解析一个字符串，并返回一个浮点数。

//该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

//如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

if (parseFloat(value1) > parseFloat(value2)) { //如果当前值 大于 下一个值

var temp = trsValue[j]; //那么就记住 大 的那个值

trsValue[j] = trsValue[i];

trsValue[i] = temp;

}

} else if (type == "ip") {

if (ip2int(value1) > ip2int(value2)) {

var temp = trsValue[j];

trsValue[j] = trsValue[i];

trsValue[i] = temp;

}

} else {

//JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。

//说明比较结果的数字。

// 如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。

// 如果 stringObject 大于 target，则该方法返回大于 0 的数。

// 如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。

if (value1.localeCompare(value2) > 0) { //该方法不兼容谷歌浏览器

var temp = trsValue[j];

trsValue[j] = trsValue[i];

trsValue[i] = temp;

}

}

}

}

}

for (var i = 0; i 

//将排序完的 值 插入到 表格中

//:eq(index) 匹配一个给定索引值的元素

$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);

//console.log($("tbody tr:eq(" + i + ")").html())

}

sortIndex = index;

}

//IP转成整型 ？？？？？

function ip2int(ip) {

var num = 0;

ip = ip.split(".");

//Number() 函数把对象的值转换为数字。

num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[

3]);

return num;

}

})