具备排序功能的表格(JS+CSS+table)

合集下载

sortablejs和el-table使用

SortableJS 是一个现代化的、轻量级的库，用于使任何HTML表格元素可排序。

它允许用户通过拖放来动态地重新排列表格行，同时提供了多种可自定义的选项和回调函数，使得对表格的排序行为能够完全按照开发者的意愿来进行。

在Vue.js框架中，我们通常使用element-ui来构建用户界面。

Element UI 中的 el-table 是一个非常常用的组件，它提供了丰富的可配置选项和强大的功能，用于展示和操作表格数据。

结合SortableJS 和 el-table 的使用，可以让我们在Vue.js项目中轻松实现表格的拖拽排序功能。

接下来，我们将详细介绍如何在Vue.js项目中使用SortableJS 和 el-table 来实现表格的拖拽排序，以及一些注意事项。

一、安装SortableJS和element-ui在使用之前，我们首先需要安装SortableJS 和element-ui 这两个库。

在Vue.js项目中，我们可以通过npm或yarn来进行安装。

1. 安装SortableJS在命令行中运行以下命令来安装SortableJS：```bashnpm install sortablejs```2. 安装element-ui在命令行中运行以下命令来安装element-ui：```bashnpm install element-ui```安装完成之后，我们就可以开始在Vue.js项目中使用这两个库了。

二、在Vue.js项目中使用SortableJS在Vue.js项目中使用SortableJS，我们首先需要引入它，并在需要进行排序的表格上添加相应的指令和事件处理函数。

1. 引入SortableJS在需要使用SortableJS的组件中，首先需要引入SortableJS：```javascriptimport Sortable from 'sortablejs';```2. 编写排序方法在组件的生命周期钩子函数中，我们可以编写一个方法，用来初始化SortableJS，并设置相关的选项和回调函数：```javascriptexport default {mounted() {this.initSortable();},methods: {initSortable() {new Sortable(this.$refs.sortableTable, {animation: 150,onEnd: (evt) => {// 拖拽结束后的操作// evt.oldIndex 表示拖动前的位置// evt.newIndex 表示拖动后的位置// 可以在这里处理数据的更新}});}}}```在这个例子中，我们在组件的 mounted 钩子函数中调用了initSortable 方法，用来初始化SortableJS。

20个很漂亮的CSS表格

并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。

现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）#1. TableclothTablecloth 由CSS Globe开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。

#2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。

#3. A CSS styled table version 2Veerle Duoh为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。

#4. Sortable TableSortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。

#5. Row Locking with CSS and JavaScript演示了如何利用Javascript 和CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。

#6. Vertical scrolling tables如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。

通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。

#7. Replicating a Tree table利用HTML 和CSS 建立的树状表格。

#8. Collapsible tables with DOM and CSS利用DOM 和CSS 建立的可折叠的表格效果。

表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。

jquery.tableSort.js表格排序插件使用方法详解

jquery.tableSort.js表格排序插件使⽤⽅法详解本⽂实例为⼤家分享了jquery.tableSort.js表格排序的具体代码，供⼤家参考，具体内容如下1.⼀定要引jQuery包，所有jq插件都是基于jQuery包的2.如果想指定哪⼀栏不排序这样写 $(“#mytable”).tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了参考：///article/105217.htm<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-1.9.0.min.js"></script><script type="text/javascript" src="js/jquery.tablesort.js"></script><style type="text/css">#tip {border: solid 1px black;width: 358px;line-height: 21px;height: 21px;padding: 2px 10px;background-color: pink;font-size: 12px;text-align: center;margin: 10px auto 10px;}.table {width: 380px;margin: 0 auto;border-collapse: collapse;text-align: center;}.table tr td,.table tr th {background: greenyellow;border: solid 1px red;color: #666;height: 30px;/*line-height: 30px;*/}.table tr th {background: #89AFB1;color: red;text-align: center;font-size: 14px;}.table a,.table a:visited {color: red;text-decoration: none}.table a:hover,.table a:active {color: blue;text-decoration: none}</style><script type="text/javascript">$(function() {$('table').tablesort().data('tablesort');var i = 0;$(".table tr th a").click(function() {if (i % 2 == 0) {$(".sj").text('升序');i++;} else {$(".sj").text('降序');i++;}})})</script></script></head><body><div id="tip">默认⽆排列规则(<span class="sj">----</span>)</div><table id="tbStudent" class="table"><tr><th><a class="num" href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编号</a></th> <th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >姓名</a></th><th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >性别</a></th><th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >总分</a></th></tr><tr><td>1031</td><td>李渊</td><td>男</td><td>654</td></tr><tr><td>1021</td><td>张扬</td><td>男</td><td>624</td></tr><tr><td>1011</td><td>吴敏</td><td>⼥</td><td>632</td></tr><tr><td>1026</td><td>李⼩明</td><td>男</td><td>610</td></tr><tr><td>1016</td><td>周谨</td><td>⼥</td><td>690</td></tr><tr><td>1041</td><td>谢⼩敏</td><td>⼥</td><td>632</td></tr><tr><td>1072</td><td>刘明明</td><td>男</td><td>633</td></tr><tr><td>1063</td><td>蒋忠公</td><td>男</td><td>675</td></tr></table></body></html>源码下载：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery实现的table排序功能示例

jquery实现的table排序功能⽰例本⽂实例讲述了jquery实现的table排序功能。

分享给⼤家供⼤家参考，具体如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><style type="text/css">div{width: 1024px;margin: 0 auto; /*div相对屏幕左右居中*/}table{border: solid 1px #666;border-collapse: collapse;width: 100%;cursor: default; /*该属性定义了⿏标指针放在⼀个元素边界范围内时所⽤的光标形状,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;}</style><SCRIPT type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {var tableObject = $('#tableSort'); //获取id为tableSort的table对象var tbHead = tableObject.children('thead'); //获取table对象下的theadvar tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的thvar tbBody = tableObject.children('tbody'); //获取table对象下的tbodyvar tbBodyTr = tbBody.find('tr'); //获取tbody下的trvar sortIndex = -1;tbHeadTh.each(function () {//遍历thead的tr下的thvar thisIndex = tbHeadTh.index($(this)); //获取th所在的列号//给表态th增加⿏标位于上⽅时发⽣的事件$(this).mouseover(function () {tbBodyTr.each(function () {//编列tbody下的trvar tds = $(this).find("td"); //获取列号为参数index的td对象集合$(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式});var tds = $(this).find("td");$(tds[thisIndex]).removeClass("hover");//⿏标离开时移除td对象上的样式});});$(this).click(function () {//给当前表头th增加点击事件var dataType = $(this).attr("type");//点击时获取当前th的type属性值checkColumnValue(thisIndex, dataType);});});$("tbody tr").removeClass(); //先移除tbody下tr的所有css类//table中tbody中tr⿏标位于上⾯时添加颜⾊,离开时移除颜⾊$("tbody tr").mouseover(function () {$(this).addClass("hover");}).mouseout(function () {$(this).removeClass("hover");});//对表格排序function checkColumnValue(index, type) {var trsValue = new Array();tbBodyTr.each(function () {var tds = $(this).find('td');//获取⾏号为index列的某⼀⾏的单元格内容与该单元格所在⾏的⾏内容添加到数组trsValue中trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());$(this).html("");});var len = trsValue.length;if (index == sortIndex) {//如果已经排序了则直接倒序trsValue.reverse();} else {for (var i = 0; i < len; i++) {//split() ⽅法⽤于把⼀个字符串分割成字符串数组//获取每⾏分割后数组的第⼀个值,即此列的数组类型,定义了字符串\数字\Iptype = trsValue[i].split(".separator")[0];for (var j = i + 1; j < len; j++) {//获取每⾏分割后数组的第⼆个值,即⽂本值value1 = trsValue[i].split(".separator")[1];//获取下⼀⾏分割后数组的第⼆个值,即⽂本值value2 = trsValue[j].split(".separator")[1];//接下来是数字\字符串等的⽐较if (type == "number") {value1 = value1 == "" ? 0 : value1;value2 = value2 == "" ? 0 : value2;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 {if (value1.localeCompare(value2) > 0) {//该⽅法不兼容⾕歌浏览器var temp = trsValue[j];trsValue[j] = trsValue[i];trsValue[i] = temp;}}}}}for (var i = 0; i < len; i++) {$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);}sortIndex = index;}//IP转成整型function ip2int(ip) {var num = 0;ip = ip.split(".");num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); return num;})</script><BODY><div><table id="tableSort"><thead><tr><th type="number">序号</th><th type="string">书名</th><th type="number">价格（元）</th><th type="string">出版时间</th><th type="number">印刷量（册）</th><th type="ip">IP</th></tr></thead><tbody><tr class="hover"><td class="sequence"> 1</td><td>狼图腾</td><td>29.80</td><td>2009-10</td><td>50000</td><td>192.168.1.125</td></tr><tr><td class="sequence"> 2</td><td>孝⼼不能等待</td><td>29.80</td><td>2009-09</td><td>800</td><td>192.68.1.125</td></tr><tr><td class="sequence"> 3</td><td>藏地密码2</td>2008-10</td><td></td><td>192.102.0.12</td></tr><tr><td class="sequence">4</td><td>藏地密码1</td><td>24.80</td><td>2008-10</td><td></td><td>215.34.126.10</td></tr><tr><td class="sequence">5</td><td>设计模式之禅</td><td>69.00</td><td>2011-12</td><td></td><td>192.168.1.5</td></tr><tr><td class="sequence">6</td><td>轻量级 Java EE 企业应⽤实战 </td><td>99.00</td><td>2012-04</td><td>5000</td><td>192.358.1.125</td></tr><tr><td class="sequence">7</td><td>Java 开发实战经典<td>2012-01</td><td>2000</td><td>192.168.1.25</td></tr><tr><td class="sequence" onclick="sortArray()">8</td><td>Java Web 开发实战经典</td><td>69.80</td><td>2011-11</td><td>2500</td><td>215.168.54.125</td></tr></tbody></table></div></body></html>运⾏效果图如下：更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

ant design vue table排序通用方法

ant design vue table排序通用方法标题：Ant Design Vue Table 排序通用方法详解在当今的Web开发中，数据展示是必不可少的一部分。

而Vue.js作为一款流行的前端框架，为我们提供了强大的数据操作和展示功能。

在Vue生态系统中，Ant Design Vue是一个优秀的UI库，其中的Table组件是我们进行数据展示的常用工具。

然而，如何高效地对Table中的数据进行排序，是我们需要掌握的关键技能。

本文将详细介绍Ant Design Vue Table排序通用方法。

一、了解Ant Design Vue TableAnt Design Vue Table 是一个高度封装的表格组件，具有丰富的功能和优雅的外观。

它支持多种表格操作，包括但不限于增删改查、分页、筛选、排序等。

对于开发者来说，只需要简单配置即可实现复杂的功能。

二、 Ant Design Vue Table 排序原理Ant Design Vue Table 的排序主要依赖于其内部的SorterMixin。

这个mixin 为Table提供了一种通用的排序机制。

当用户点击表头的排序图标时，SorterMixin会捕获到这个事件，并根据当前的排序状态和用户的选择，重新计算表格的数据源。

三、使用Ant Design Vue Table 排序在实际应用中，我们可以通过以下步骤来使用Ant Design Vue Table的排序功能：1. 引入Table组件首先，我们需要在项目中引入Ant Design Vue的Table组件。

这可以通过安装ant-design-vue包并导入Table组件来实现。

2. 设置列定义然后，我们需要设置Table的列定义（columns）。

在这个过程中，我们可以指定哪些列可以被排序，以及它们的默认排序方式。

3. 实现数据更新最后，我们需要在Table的data属性中提供数据源。

每当用户改变排序选项时，我们需要更新这个数据源以反映新的排序结果。

ant design vue table排序通用方法

ant design vue table排序通用方法标题：Ant Design Vue Table排序通用方法的详解在前端开发中，表格是一个非常重要的组件。

无论是数据展示，还是数据操作，我们都需要用到表格。

Ant Design Vue作为一款优秀的UI库，提供了丰富的表格功能，包括但不限于：分页、过滤、排序等。

本文主要探讨的就是Ant Design Vue Table的排序通用方法。

首先，我们要明确一点，Ant Design Vue Table的排序并不是一个单独的功能，而是依赖于其内部的数据管理机制。

也就是说，你不能直接调用一个“排序”函数来实现排序，而是需要通过修改表格的数据源（dataSource）来达到排序的效果。

那么，如何修改dataSource呢？这就需要用到JavaScript的数组方法了。

在这里，我推荐使用sort()方法。

sort()方法会按照字典顺序对数组的所有元素进行排序，并返回数组。

如果想让数组按照其他标准进行排序，可以传入一个比较函数作为参数。

举个例子，假设我们有一个包含用户信息的数组：```javascriptlet users = [{ name: 'Tom', age: 20 },{ name: 'Jerry', age: 25 },{ name: 'Spike', age: 18 }];```如果我们想按照年龄从小到大排序，可以这样做：```javascriptusers.sort((a, b) => a.age - b.age);```这行代码的意思是：对于数组中的每一对元素，都比较它们的age属性。

如果a的age小于b的age，就认为a应该排在b前面，反之亦然。

回到Ant Design Vue Table，我们可以把上面的代码稍作修改，应用到实际项目中。

首先，我们需要获取到表格的dataSource：```javascriptlet dataSource = this.$refs.table.state.dataSource;```然后，我们可以使用sort()方法对dataSource进行排序：```javascriptdataSource.sort((a, b) => a.age - b.age);```最后，我们需要更新表格的状态，让它显示新的数据：```javascriptthis.$refs.table.setState({ dataSource });```以上就是Ant Design Vue Table排序的基本思路。

JS实现点击表头表格自动排序（含数字、字符串、日期）

JS实现点击表头表格⾃动排序（含数字、字符串、⽇期）这篇⽂章主要介绍了利⽤JS如何实现点击表头后表格⾃动排序，其中包含数字排序、字符串排序以及⽇期格式的排序，⽂中给出了完整的⽰例代码，并做了注释，相信⼤家都能看懂，感兴趣的朋友们⼀起来看看吧。

<!DOCTYPE><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS实现点击表头表格⾃动排序（含数字、字符串、⽇期）</title><style>#tableSort {moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;border-collapse: collapse;border-spacing: 0;margin: 0;padding: 0;width: 100%;text-align: center;margin: 15px 0;}#tableSort th {cursor: pointer;background: #eee}#tableSort tr:nth-child(even) {background: #f9f9f9}#tableSort th,#tableSort td {padding: 10px;border: 1px solid #ccc;}</style></head><body><table id="tableSort"><thead><tr><th data-type="num">ID</th><th data-type="string">姓名</th><th data-type="string">性别</th><th data-type="date">时间</th></tr></thead><tbody><tr><td>07</td><td>zzzz</td><td>男</td><td>2012-12-12</td></tr><tr><td>03</td><td>yyyy</td><td>⼥</td><td>2013-12-16</td></tr><tr><td>01</td><td>hhhh</td><td>男</td><td>2014-12-12</td></tr><tr><td>04</td><td>wwww</td><td>⼥</td><td>2018-01-12</td></tr><tr><td>02</td><td>dddd</td><td>男</td><td>2016-12-18</td></tr><tr><td>06</td><td>ssss</td><td>⼥</td><td>2018-03-16</td></tr><tr><td>05</td><td>tttt</td><td>男</td><td>2017-07-22</td></tr></tbody></table><script>;(function() {var tbody = document.querySelector('#tableSort').tBodies[0];var th = document.querySelector('#tableSort').tHead.rows[0].cells;var td = tbody.rows;for(var i = 0; i < th.length; i++) {th[i].flag = 1;th[i].onclick = function() {sort(this.getAttribute('data-type'), this.flag, this.cellIndex);this.flag = -this.flag;};};function sort(str, flag, n) {var arr = [];//存放DOMfor(var i = 0; i < td.length; i++) {arr.push(td[i]);};//排序arr.sort(function(a, b) {return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;});//添加for(var i = 0; i < arr.length; i++) {tbody.appendChild(arr[i]);};};//排序⽅法function method(str, a, b) {switch(str) {case 'num': //数字排序return a - b;break;case 'string': //字符串排序return a.localeCompare(b);break;default: //⽇期排序，IE8下'2012-12-12'这种格式⽆法设置时间，替换成'/'return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime(); };};})();</script></body></html>效果图：按时间排序（其他效果⼤家可以⾃⼰在本地预览）：转载于：。

jsp+js实现可排序表格

首先，定义一个js：tableSort.js:function sort(tableId, sortColumn,nodeType) {var table = document.getElementById("theTable");var tableBody = table.tBodies[0];var tableRows = tableBody.rows;var rowArray = new Array();for (var i = 0; i < tableRows.length; i++) {rowArray[i] = tableRows[i];}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}function generateCompareTR(sortColumn, nodeType) {return function compareTR(trLeft, trRight) {var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType); if (leftValue < rightValue) { return -1; } else {if (leftValue > rightValue) { return 1;} else {return 0;}}};}function convert(value, dataType) { switch (dataType) { case "int": return parseInt(value); case "float": return parseFloat(value); case "date": return new Date(Date.parse(value)); default: return value.toString(); }}然后是使用：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'tabel.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><script type="text/javascript" src="userjs/tableSort.js"></script></head><body><table id="theTable" align="center" border="1"><tr><td>标题1</td><td onclick="sort(theTable,1,'int')"> 标题2</td><td onclick="sort(theTable,2,'int')"> 标题3</td><td onclick="sort(theTable,3,'int')"> 标题4</td><td onclick="sort(theTable,4,'int')"> 标题5</td><td onclick="sort(theTable,5,'int')"> 标题6</td><td onclick="sort(theTable,6,'int')"> 标题7</td></tr></thead><tbody><tr><td></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr><tr><td>2</td><td>3</td>5</td><td>6</td><td>7</td><td>1</td> </tr><tr><td>3</td><td>4</td><td>5</td><td>6<td>1</td><td>2</td> </tr><tr><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td></td> </tr><tr><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><tr><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table></body></html>之后就可以看到效果了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><title>具备排序功能的表格(JS+CSS+table)-</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-FAMIL Y: 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-FAMIL Y: 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-DECORA TION: none}TH A:visited {COLOR: #000080}TH A:active {COLOR: #800000; TEXT-DECORA TION: underline}TH A:hover {COLOR: #800000; TEXT-DECORA TION: 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.stColumn = 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 == stColumn)tblEl.reverseSort[col] = !tblEl.reverseSort[col];// Remember this column as the last one sorted.stColumn = 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 content 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].nodeV alue;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 1return -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(curV al, 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 (stChild != null)cellEl.removeChild(stChild);// 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></HEAD><BODY><P><TABLE cellSpacing=0 cellPadding=0 border=0><THEAD><TR><TH class=mainHeader colSpan=11><a href="" target="_blank">懒人建站</a></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="/js/">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="/js/">Yds</A></TH><TH><A title="Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 4, true);"href="/js/">Yds/G</A></TH><TH><A title="Total Rushing Yards"onclick="this.blur(); return sortTable('offTblBdy', 5, true);"href="/js/">RuYds</A></TH><TH><A title="Rushing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 6, true);"href="/js/">RuYds/G</A></TH><TH><A title="Total Passing Yards"onclick="this.blur(); return sortTable('offTblBdy', 7, true);"href="/js/">PaYds</A></TH><TH><A title="Passing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 8, true);"href="/js/">PaYds/G</A></TH><TH><A title="Total Points Scored"onclick="this.blur(); return sortTable('offTblBdy', 9, true);"href="/js/">Pts</A></TH><TH><A title="Points Per Game"onclick="this.blur(); return sortTable('offTblBdy', 10, true);"href="/js/">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>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>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>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>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>文章来源：季长旭博客鹿胎膏。