javascript 二维排序表格代码

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

完整源码如下：

二维排序表格

*
{
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;
}

//------------以下是对二维数组的初始化与显示操作----------
// 记录二维数组
var twoArr = new Array(5);
// 初始化二维数组
function initTwoArr() {
for (var i = 0; i b) ? 1 : 0);
}
var desc = false; // 默认为升序
// 根据传入的l列排序table
function sortRow(rowTh) {
// 找出rowIndex;
var rowIndex;
var tbody = document.getElementById("tb").childNodes[1];
var allTr = tbody.childNodes;
for (var i = 0; i row[j + 1]) {
// 交换当前数组的同时要交换对应列的其他数据
var tmp = row[j];
row[j] = row[j + 1];
row[j + 1] = tmp;
for (var m = 0; m ";
cell.innerHTML = input;
// 把光标移到input内
cell.firstChild.focus();
}
// 保存改变的值
function saveChange(input, voldValue) {
// 记录输入框的值
var newValue = input.value;
if (newValue == "" || isNaN(newValue)) {
// 如果输入的值不是数字或者为空，则还原为原始值
newValue = voldValue;
}
// 处理单元格id，则可以对应数组下标
var arrIndex = input.parentNode.id;
var reg = /-/;
var arrIndexAB = arrIndex.split(reg);
var arrIndexA = arrIndexAB[0];
var arrIndexB = arrIndexAB[1];
// 更改对应数组的值
twoArr[arrIndexA][arrIndexB] = newValue;
// 更改单元格的显示
input.parentNode.innerHTML = newValue;
}
function showMe() {
alert("作者：叶志雄");
}

二维排序表格

  列1 列2 列3 列4 列5 列6
行1            
行2            
行3            
行4            
行5            

说明：

1.排序功能：单击行表头或列表头则进行正序排序；若再次单击，则进行逆序；

2.修改功能：双击某个单元格，则可进行输入操作，当输入框失去焦点时，则新数据被保存；

3.随机功能：每次刷新页面，表格中的数据都不一样；

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

  • js 静态HTML表格排序功能实现

    无标题文档 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{background:

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

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

    效果图如下: Demo演示地址:点击这里 主要的JS代码如下: 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 = fu

  • JS实现的点击表头排序功能示例

    JS实现的点击表头排序功能示例

    本文实例讲述了JS实现的点击表头排序功能.分享给大家供大家参考,具体如下: 运行效果: 1.index.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jb51.net点击表头排序</t

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • javascript多种数据类型表格排序代码分析

    中文汉字排序. 中英文混合排序. 数据大小排序. 文件类型排序(后缀名排序) 日期时间排序. 价格排序. 中文混合数字排序; 使用方法:文档载入后new tableListSort(arguments,arguments). 接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}}:对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后

  • js实现表格字段排序

    1.比较函数生成器: 复制代码 代码如下: /** * 比较函数生成器 *  * @param iCol *            数据行数 * @param sDataType *            该行的数据类型 * @return */function  generateCompareTRs(iCol, sDataType) {     return   function  compareTRs(oTR1, oTR2) {        vValue1 = convert(oTR1.c

  • javascript select列表内容按字母倒序排序与按列表倒序排列

    今天51js上有网友贴出了这个问题,原本以为是把内容按字母顺序倒序排列,因为以前看过一篇正序排列的文章,偶就想倒序也应该不难,查看了下资料便很快搞定了问题. 无忧脚本代码测试网页 b e c f a function st(a,b){ if(a>b) return -1; else if(a0){ t1[t1.length]=tt[0].text; t2[t2.length]=tt[0].value; tt.remove(0); } t1.sort(st); for(var i=0,c1,c2;

  • 33种Javascript 表格排序控件收集

    33种Javascript 表格排序控件收集

    1. jQuery tablesorter http://tablesorter.com/docs/ 2. Table sorting with Prototype http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ 3. Sorttable http://www.kryogenix.org/code/browser/sorttable/ 4. Table Sorting Javascript http://yoast.com/

  • js表头排序实现方法

    本文实例讲述了js表头排序实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <script type="text/javascript">     //是否递减排序     var isDescending = true;     /*****************************************     * 要排序的行必须放到<tbody></tbody>标签中     * tableId:排序表格ID

  • js表数据排序 sort table data

    建议看 http://www.jb51.net/article/11349.htm 这篇文章,后面是一些补充,实现代码重点:table class=sortable 2. test.htm 复制代码 代码如下: <SCRIPT src="sort.js" type="text/javascript"></SCRIPT> <table class=sortable id=mc1 border="1" width=&qu

随机推荐