站长资源 网络编程

javascript 二维排序表格代码

整理:jimmy2026/8/6浏览2次

简介功能如下： 1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序； 2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存； 3.随机功能：每次刷新页面，表格中的数据都不一样；效果图：完整源码如下：二维排序表格 * { font-famil

功能如下：
1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序；
2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存；
3.随机功能：每次刷新页面，表格中的数据都不一样；
效果图：

完整源码如下：

<html> <head> <title>二维排序表格</title> <style type="text/css"> * { font-family: Tahoma, Arial, Serif; font-size: 14; } body { text-align: center; min-width: 760px; } #main { width: 720px; margin: 0 auto; text-align: left; } p { border-bottom: dotted 1px #e63; font-size: 24px; font-family: Arial; font-weight: bold; } /* 设置表格样式 */table { text-align: center; border: solid 1px #4682b4; width: 80%; background-color: #4682b4; } th { background-color: #6495ed; cursor: pointer; color: White; height: 30px; } /* 配上单元格样式以后，表格呈现出细线的边框 */td { background-color: #fff; padding: 4px; } /* 深蓝色（鼠标经过） */.activecol { background-color: #005eae; } </style>  </head> <body onload="initTwoArr()">  <p> 二维排序表格</p>  <thead>  <th> &nbsp; </th> <th onclick="sortColumn(1)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列1 </th> <th onclick="sortColumn(2)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列2 </th> <th onclick="sortColumn(3)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列3 </th> <th onclick="sortColumn(4)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列4 </th> <th onclick="sortColumn(5)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列5 </th> <th onclick="sortColumn(6)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列6 </th>  </thead>   <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行1 </th>  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;    <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行2 </th>  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;    <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行3 </th>  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;    <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行4 </th>  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;    <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行5 </th>  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;      说明：<br> 1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序；<br> 2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存；<br> 3.随机功能：每次刷新页面，表格中的数据都不一样；<br>   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：js 上传图片预览问题

下一篇：兼容IE和FF的js脚本代码小结（比较常用）

站长资源 网络编程

javascript 二维排序表格代码

最新资源

一句话新闻

标签云