javascript 二维排序表格代码

网络编程 2024/10/2 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

功能如下：
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需再刷新一下页面才能执行]

二维排序,表格

标签：

二维排序,表格

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“javascript 二维排序表格代码”

暂无评论...

更新日志

2024年10月02日

javascript 二维排序表格代码

二维排序,表格

js 上传图片预览问题

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

评论“javascript 二维排序表格代码”

更新日志

友情链接