模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
表格内容排序sortTable_层和布局特效
查看演示效果
特效Tag:
表格
添加
非常不错的表格排序,您可以先修改部分代码再运行.
<html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <title>网页特效|Linkweb.cn/Js|---非常不错的表格排序</title> </head> <STYLE type=text/css>TABLE { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px } TD { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap } TH { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap } TD.numeric { TEXT-ALIGN: right } TH { BACKGROUND-COLOR: #c0c0c0 } TH.mainHeader { COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left } TH A { COLOR: #000080; TEXT-DECORATION: none } TH A:visited { COLOR: #000080 } TH A:active { COLOR: #800000; TEXT-DECORATION: underline } TH A:hover { COLOR: #800000; TEXT-DECORATION: underline } TR.alternateRow { BACKGROUND-COLOR: #e0e0e0 } TD.sortedColumn { BACKGROUND-COLOR: #f0f0f0 } TH.sortedColumn { BACKGROUND-COLOR: #b0b0b0 } TR.alternateRow TD.sortedColumn { BACKGROUND-COLOR: #d0d0d0 } </STYLE> <SCRIPT type=text/javascript> //----------------------------------------------------------------------------- // sortTable(id, col, rev) // // id - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted. // col - Index of the column to sort, 0 = first column, 1 = second column, // etc. // rev - If true, the column is sorted in reverse (descending) order // initially. // // Note: the team name column (index 1) is used as a secondary sort column and // always sorted in ascending order. //----------------------------------------------------------------------------- function sortTable(id, col, rev) { // Get the table or table section to sort. var tblEl = document.getElementById(id); // The first time this function is called for a given table, set up an // array of reverse sort flags. if (tblEl.reverseSort == null) { tblEl.reverseSort = new Array(); // Also, assume the team name column is initially sorted. tblEl.lastColumn = 1; } // If this column has not been sorted before, set the initial sort direction. if (tblEl.reverseSort[col] == null) tblEl.reverseSort[col] = rev; // If this column was the last one sorted, reverse its sort direction. if (col == tblEl.lastColumn) tblEl.reverseSort[col] = !tblEl.reverseSort[col]; // Remember this column as the last one sorted. tblEl.lastColumn = col; // Set the table display style to "none" - necessary for Netscape 6 // browsers. var oldDsply = tblEl.style.display; tblEl.style.display = "none"; // Sort the rows based on the mrc of the specified column using a // selection sort. var tmpEl; var i, j; var minVal, minIdx; var testVal; var cmp; for (i = 0; i < tblEl.rows.length - 1; i++) { // Assume the current row has the minimum value. minIdx = i; minVal = getTextValue(tblEl.rows[i].cells[col]); // Search the rows that follow the current one for a smaller value. for (j = i + 1; j < tblEl.rows.length; j++) { testVal = getTextValue(tblEl.rows[j].cells[col]); cmp = compareValues(minVal, testVal); // Negate the comparison result if the reverse sort flag is set. if (tblEl.reverseSort[col]) cmp = -cmp; // Sort by the second column (team name) if those values are equal. if (cmp == 0 && col != 1) cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]), getTextValue(tblEl.rows[j].cells[1])); // If this row has a smaller value than the current minimum, remember its // position and update the current minimum value. if (cmp > 0) { minIdx = j; minVal = testVal; } } // By now, we have the row with the smallest value. Remove it from the // table and insert it before the current row. if (minIdx > i) { tmpEl = tblEl.removeChild(tblEl.rows[minIdx]); tblEl.insertBefore(tmpEl, tblEl.rows[i]); } } // Make it look pretty. makePretty(tblEl, col); // Set team rankings. setRanks(tblEl, col, rev); // Restore the table's display style. tblEl.style.display = oldDsply; return false; } //----------------------------------------------------------------------------- // Functions to get and compare values during a sort. //----------------------------------------------------------------------------- // This code is necessary for browsers that don't reflect the DOM constants // (like IE). if (document.ELEMENT_NODE == null) { document.ELEMENT_NODE = 1; document.TEXT_NODE = 3; } function getTextValue(el) { var i; var s; // Find and concatenate the values of all text nodes contained within the // element. s = ""; for (i = 0; i < el.childNodes.length; i++) if (el.childNodes[i].nodeType == document.TEXT_NODE) s += el.childNodes[i].nodeValue; else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == "BR") s += " "; else // Use recursion to get text within sub-elements. s += getTextValue(el.childNodes[i]); return normalizeString(s); } function compareValues(v1, v2) { var f1, f2; // If the values are numeric, convert them to floats. f1 = parseFloat(v1); f2 = parseFloat(v2); if (!isNaN(f1) && !isNaN(f2)) { v1 = f1; v2 = f2; } // Compare the two values. if (v1 == v2) return 0; if (v1 > v2) return 1 return -1; } // Regular expressions for normalizing white space. var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"); var whtSpMult = new RegExp("\\s\\s+", "g"); function normalizeString(s) { s = s.replace(whtSpMult, " "); // Collapse any multiple whites space. s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space. return s; } //----------------------------------------------------------------------------- // Functions to update the table appearance after a sort. //----------------------------------------------------------------------------- // Style class names. var rowClsNm = "alternateRow"; var colClsNm = "sortedColumn"; // Regular expressions for setting class names. var rowTest = new RegExp(rowClsNm, "gi"); var colTest = new RegExp(colClsNm, "gi"); function makePretty(tblEl, col) { var i, j; var rowEl, cellEl; // Set style classes on each row to alternate their appearance. for (i = 0; i < tblEl.rows.length; i++) { rowEl = tblEl.rows[i]; rowEl.className = rowEl.className.replace(rowTest, ""); if (i % 2 != 0) rowEl.className += " " + rowClsNm; rowEl.className = normalizeString(rowEl.className); // Set style classes on each column (other than the name column) to // highlight the one that was sorted. for (j = 2; j < tblEl.rows[i].cells.length; j++) { cellEl = rowEl.cells[j]; cellEl.className = cellEl.className.replace(colTest, ""); if (j == col) cellEl.className += " " + colClsNm; cellEl.className = normalizeString(cellEl.className); } } // Find the table header and highlight the column that was sorted. var el = tblEl.parentNode.tHead; rowEl = el.rows[el.rows.length - 1]; // Set style classes for each column as above. for (i = 2; i < rowEl.cells.length; i++) { cellEl = rowEl.cells[i]; cellEl.className = cellEl.className.replace(colTest, ""); // Highlight the header of the sorted column. if (i == col) cellEl.className += " " + colClsNm; cellEl.className = normalizeString(cellEl.className); } } function setRanks(tblEl, col, rev) { // Determine whether to start at the top row of the table and go down or // at the bottom row and work up. This is based on the current sort // direction of the column and its reversed flag. var i = 0; var incr = 1; if (tblEl.reverseSort[col]) rev = !rev; if (rev) { incr = -1; i = tblEl.rows.length - 1; } // Now go through each row in that direction and assign it a rank by // counting 1, 2, 3... var count = 1; var rank = count; var curVal; var lastVal = null; // Note that this loop is skipped if the table was sorted on the name // column. while (col > 1 && i >= 0 && i < tblEl.rows.length) { // Get the value of the sort column in this row. curVal = getTextValue(tblEl.rows[i].cells[col]); // On rows after the first, compare the sort value of this row to the // previous one. If they differ, update the rank to match the current row // count. (If they are the same, this row will get the same rank as the // previous one.) if (lastVal != null && compareValues(curVal, lastVal) != 0) rank = count; // Set the rank for this row. tblEl.rows[i].rank = rank; // Save the sort value of the current row for the next time around and bump // the row counter and index. lastVal = curVal; count++; i += incr; } // Now go through each row (from top to bottom) and display its rank. Note // that when two or more rows are tied, the rank is shown on the first of // those rows only. var rowEl, cellEl; var lastRank = 0; // Go through the rows from top to bottom. for (i = 0; i < tblEl.rows.length; i++) { rowEl = tblEl.rows[i]; cellEl = rowEl.cells[0]; // Delete anything currently in the rank column. while (cellEl.lastChild != null) cellEl.removeChild(cellEl.lastChild); // If this row's rank is different from the previous one, Insert a new text // node with that rank. if (col > 1 && rowEl.rank != lastRank) { cellEl.appendChild(document.createTextNode(rowEl.rank)); lastRank = rowEl.rank; } } } </SCRIPT> <META mrc="MSHTML 6.00.2600.0" name=GENERATOR></HEAD> <BODY> <P><!-- Offensive statistics table. --> <TABLE cellSpacing=0 cellPadding=0 border=0> <THEAD> <TR> <TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR> <TR> <TH style="TEXT-ALIGN: left">Rank</TH> <TH style="TEXT-ALIGN: left"><A title="Team Name" onclick="this.blur(); return sortTable('offTblBdy', 1, false);" href="#">Team</A></TH> <TH><SPAN title="Games Played">Gms</SPAN></TH> <TH><A title="Total Yards" onclick="this.blur(); return sortTable('offTblBdy', 3, true);" href="#">Yds</A></TH> <TH><A title="Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 4, true);" href="#">Yds/G</A></TH> <TH><A title="Total Rushing Yards" onclick="this.blur(); return sortTable('offTblBdy', 5, true);" href="#">RuYds</A></TH> <TH><A title="Rushing Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 6, true);" href="#">RuYds/G</A></TH> <TH><A title="Total Passing Yards" onclick="this.blur(); return sortTable('offTblBdy', 7, true);" href="#">PaYds</A></TH> <TH><A title="Passing Yards Per Game" onclick="this.blur(); return sortTable('offTblBdy', 8, true);" href="#">PaYds/G</A></TH> <TH><A title="Total Points Scored" onclick="this.blur(); return sortTable('offTblBdy', 9, true);" href="#">Pts</A></TH> <TH><A title="Points Per Game" onclick="this.blur(); return sortTable('offTblBdy', 10, true);" href="#">Pts/G</A></TH></TR></THEAD> <TBODY id=offTblBdy> <TR> <TD class=numeric></TD> <TD>Arizona</TD> <TD class=numeric>16</TD> <TD class=numeric>4898</TD> <TD class=numeric>306.1</TD> <TD class=numeric>1449</TD> <TD class=numeric>90.6</TD> <TD class=numeric>3449</TD> <TD class=numeric>215.6</TD> <TD class=numeric>295</TD> <TD class=numeric>18.4</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Atlanta</TD> <TD class=numeric>16</TD> <TD class=numeric>5070</TD> <TD class=numeric>316.9</TD> <TD class=numeric>1773</TD> <TD class=numeric>110.8</TD> <TD class=numeric>3297</TD> <TD class=numeric>206.1</TD> <TD class=numeric>291</TD> <TD class=numeric>18.2</TD></TR> <TR> <TD class=numeric></TD> <TD>Baltimore</TD> <TD class=numeric>16</TD> <TD class=numeric>4773</TD> <TD class=numeric>318.2</TD> <TD class=numeric>1598</TD> <TD class=numeric>106.5</TD> <TD class=numeric>3175</TD> <TD class=numeric>211.7</TD> <TD class=numeric>284</TD> <TD class=numeric>18.9</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Buffalo</TD> <TD class=numeric>16</TD> <TD class=numeric>5137</TD> <TD class=numeric>321.1</TD> <TD class=numeric>1686</TD> <TD class=numeric>105.4</TD> <TD class=numeric>3451</TD> <TD class=numeric>215.7</TD> <TD class=numeric>265</TD> <TD class=numeric>16.6</TD></TR> <TR> <TD class=numeric></TD> <TD>Carolina</TD> <TD class=numeric>16</TD> <TD class=numeric>4254</TD> <TD class=numeric>265.9</TD> <TD class=numeric>1372</TD> <TD class=numeric>85.8</TD> <TD class=numeric>2882</TD> <TD class=numeric>180.1</TD> <TD class=numeric>253</TD> <TD class=numeric>15.8</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Chicago</TD> <TD class=numeric>16</TD> <TD class=numeric>4694</TD> <TD class=numeric>293.4</TD> <TD class=numeric>1742</TD> <TD class=numeric>108.9</TD> <TD class=numeric>2952</TD> <TD class=numeric>184.5</TD> <TD class=numeric>338</TD> <TD class=numeric>21.1</TD></TR> <TR> <TD class=numeric></TD> <TD>Cincinnati</TD> <TD class=numeric>16</TD> <TD class=numeric>4800</TD> <TD class=numeric>300.0</TD> <TD class=numeric>1712</TD> <TD class=numeric>107.0</TD> <TD class=numeric>3088</TD> <TD class=numeric>193.0</TD> <TD class=numeric>226</TD> <TD class=numeric>14.1</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Cleveland</TD> <TD class=numeric>16</TD> <TD class=numeric>4152</TD> <TD class=numeric>259.5</TD> <TD class=numeric>1351</TD> <TD class=numeric>84.4</TD> <TD class=numeric>2801</TD> <TD class=numeric>175.1</TD> <TD class=numeric>285</TD> <TD class=numeric>17.8</TD></TR> <TR> <TD class=numeric></TD> <TD>Dallas</TD> <TD class=numeric>16</TD> <TD class=numeric>4402</TD> <TD class=numeric>275.1</TD> <TD class=numeric>2184</TD> <TD class=numeric>136.5</TD> <TD class=numeric>2218</TD> <TD class=numeric>138.6</TD> <TD class=numeric>246</TD> <TD class=numeric>15.4</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Denver</TD> <TD class=numeric>16</TD> <TD class=numeric>4817</TD> <TD class=numeric>301.1</TD> <TD class=numeric>1877</TD> <TD class=numeric>117.3</TD> <TD class=numeric>2940</TD> <TD class=numeric>183.8</TD> <TD class=numeric>340</TD> <TD class=numeric>21.2</TD></TR> <TR> <TD class=numeric></TD> <TD>Detroit</TD> <TD class=numeric>16</TD> <TD class=numeric>4994</TD> <TD class=numeric>312.1</TD> <TD class=numeric>1398</TD> <TD class=numeric>87.4</TD> <TD class=numeric>3596</TD> <TD class=numeric>224.8</TD> <TD class=numeric>270</TD> <TD class=numeric>16.9</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Green Bay</TD> <TD class=numeric>16</TD> <TD class=numeric>5463</TD> <TD class=numeric>341.4</TD> <TD class=numeric>1693</TD> <TD class=numeric>105.8</TD> <TD class=numeric>3770</TD> <TD class=numeric>235.6</TD> <TD class=numeric>390</TD> <TD class=numeric>24.4</TD></TR> <TR> <TD class=numeric></TD> <TD>Indianapolis</TD> <TD class=numeric>16</TD> <TD class=numeric>5955</TD> <TD class=numeric>372.2</TD> <TD class=numeric>1966</TD> <TD class=numeric>122.9</TD> <TD class=numeric>3989</TD> <TD class=numeric>249.3</TD> <TD class=numeric>413</TD> <TD class=numeric>25.8</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Jacksonville</TD> <TD class=numeric>16</TD> <TD class=numeric>4840</TD> <TD class=numeric>302.5</TD> <TD class=numeric>1600</TD> <TD class=numeric>100.0</TD> <TD class=numeric>3240</TD> <TD class=numeric>202.5</TD> <TD class=numeric>294</TD> <TD class=numeric>18.4</TD></TR> <TR> <TD class=numeric></TD> <TD>Kansas City</TD> <TD class=numeric>16</TD> <TD class=numeric>5673</TD> <TD class=numeric>354.6</TD> <TD class=numeric>2008</TD> <TD class=numeric>125.5</TD> <TD class=numeric>3665</TD> <TD class=numeric>229.1</TD> <TD class=numeric>320</TD> <TD class=numeric>20.0</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>Miami</TD> <TD class=numeric>16</TD> <TD class=numeric>4821</TD> <TD class=numeric>301.3</TD> <TD class=numeric>1664</TD> <TD class=numeric>104.0</TD> <TD class=numeric>3157</TD> <TD class=numeric>197.3</TD> <TD class=numeric>344</TD> <TD class=numeric>21.5</TD></TR> <TR> <TD class=numeric></TD> <TD>Minnesota</TD> <TD class=numeric>16</TD> <TD class=numeric>5006</TD> <TD class=numeric>333.7</TD> <TD class=numeric>1523</TD> <TD class=numeric>101.5</TD> <TD class=numeric>3483</TD> <TD class=numeric>232.2</TD> <TD class=numeric>287</TD> <TD class=numeric>19.1</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>New England</TD> <TD class=numeric>16</TD> <TD class=numeric>4882</TD> <TD class=numeric>305.1</TD> <TD class=numeric>1793</TD> <TD class=numeric>112.1</TD> <TD class=numeric>3089</TD> <TD class=numeric>193.1</TD> <TD class=numeric>371</TD> <TD class=numeric>23.2</TD></TR> <TR> <TD class=numeric></TD> <TD>New Orleans</TD> <TD class=numeric>16</TD> <TD class=numeric>5226</TD> <TD class=numeric>326.6</TD> <TD class=numeric>1712</TD> <TD class=numeric>107.0</TD> <TD class=numeric>3514</TD> <TD class=numeric>219.6</TD> <TD class=numeric>333</TD> <TD class=numeric>20.8</TD></TR> <TR class=alternateRow> <TD class=numeric></TD> <TD>New York Giants</TD> <TD class=numeric>16</TD> <TD class=numeric>5335</TD> <TD class=numeric>333.4</TD> <TD class=numeric>1777</TD> <TD class=numeric>111.1</TD> <TD class=numeric>3558</TD> <TD class=numeric>222.4</TD> <TD class=numeric>294</TD> <TD class=numeric>18.4</TD></TR> </TBODY></TABLE> </BODY></HTML> </html>
所属频道:
层和布局特效
/
更新时间:2012-05-24
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
表格操作
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
Div+CSS,图片垂直居中
未知高度的div垂直居中多浏览器方法
CSS+JS表格行选中变色并储存的效果代码
JS层抖动特效,类似QQ聊天窗口抖动
动态表格(PowerTable)
CSS模拟出的Excel表格效果
CSS多层绝对嵌套定位的一个小演示
CSS滑动门及选项卡,布局在同一页面
未知宽度的CSS水平居中
CSS打造的边框折角效果
猜你也喜欢看这些
随机背景颜色的实现
在网页中添加上上下滚动的文字
CSS控制背景透明而内容不透明的方法
一个滚动的公告栏
背景快速闪烁
流动性非常好的网页载入页面
CSS给网页上的评论文本框加上提醒功能背景图片
在一定时间内打开一个新的窗口
图片与文字半透明效果,鼠标移上不透明
JS无刷新改变网页背景图片
相关链接:
复制本页链接
|
搜索表格内容排序sortTable
特效说明:
层和布局模板
-
表格内容排序sortTable
。