网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
javascript学习指南|javascript 表格排序方法
javascript学习指南|javascript 表格排序方法
发布时间:2019-04-10
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
二维排序表格
<script type="text/javascript"> //------------以下是对二维数组的初始化与显示操作---------- // 记录二维数组 var twoArr = new Array(5); // 初始化二维数组 function initTwoArr() { for (var i = 0; i < twoArr.length; i++) { twoArr[i] = new Array(6); for (var j = 0; j < 6; j++) { twoArr[i][j] = getRandom(); } } showTwoArrOnTable(); } // 得到0-100内的随机数 function getRandom() { var result = Math.round(Math.random() * 100 - 1); return result; } // 把二维表显示在table中 function showTwoArrOnTable() { if (twoArr == null || twoArr.length < 1) { alert("数组初始化失败!"); return; } // 设置td的数值 var allTd = document.getElementById("tb").getElementsByTagName("td"); var tdIndex = 0; for (var i = 0; i < twoArr.length; i++) { // 为每个单元格设置id,格式 1-2 与数组的下标对应的 var idValue; for (var j = 0; j < twoArr[i].length; j++) { idValue = i.toString() + "-" + j.toString(); allTd[tdIndex].id = idValue; allTd[tdIndex].innerHTML = twoArr[i][j]; tdIndex++; } } } //------------以下是对table的操作---------- // 记录当前列(数字型)与当前的排序顺序(布尔型) var currentCol; var currentReverse; // 根据(col-列索引值)排序 function sortColumn(col) { // 判断是否要对数组倒序 var doReverse; // 如果再次单击当前列,则设置逆序的标志,并记录排序的方式(正序/逆序) if (col == currentCol) { doReverse = true; currentReverse = !currentReverse; } else { currentReverse = false; } // 记录当前排序的字段 currentCol = col; // 把table的所有行放入数组中 var tb = document.getElementById("tb"); var tbody = tb.rows[1].parentNode; var allTr = new Array(); for (var i = 1; i < tb.rows.length; i++) { allTr.push(tb.rows[i]); } if (doReverse) { allTr.reverse(); } else { allTr.sort(createComp(col)); } // 把排好序的行集合加入到table中 var frag = document.createDocumentFragment(); for (var i = 0; i < allTr.length; i++) { frag.appendChild(allTr[i]); } tbody.appendChild(frag); } // 根据(col-列索引值)返回一个排序规则 function createComp(col) { // 比较函数(正序) var compFunc = function(trA, trB) { // 取出要比较的值 var valA = trA.cells[col].firstChild.nodeValue.trim(); var valB = trB.cells[col].firstChild.nodeValue.trim() return comp(valA, valB); }; return compFunc; } // 对string对象进行扩展,去除字符串两端的空格 String.prototype.trim = function() { var reg = /^s+|s+$/g; return this.replace(reg, ""); } // 默认比较方式(升序) function comp(a, b) { a = parseInt(a); b = parseInt(b); return (a < b) ? -1 : ((a > 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 < allTr.length; i++) { if (rowTh == allTr[i].firstChild) { rowIndex = i; break; } } // 对数组进行排序,再填充到table arrRowSortFunc(rowIndex, desc); desc = !desc; showTwoArrOnTable(); } // 对twoArr进行分组冒泡排序 function arrRowSortFunc(rowIndex, isDesc) { var row = twoArr[rowIndex]; for (var i = 0; i < row.length; i++) { for (var j = 0; j < row.length - i - 1; j++) { if (isDesc) { // 如果是逆序 if (row[j] < row[j + 1]) { // 交换当前数组的同时要交换对应列的其他数据 var tmp = row[j]; row[j] = row[j + 1]; row[j + 1] = tmp; for (var m = 0; m < twoArr.length; m++) { if (m != rowIndex) { var tmp2 = twoArr[m][j]; twoArr[m][j] = twoArr[m][j + 1]; twoArr[m][j + 1] = tmp2; } } } } else { // 升序 if (row[j] > row[j + 1]) { // 交换当前数组的同时要交换对应列的其他数据 var tmp = row[j]; row[j] = row[j + 1]; row[j + 1] = tmp; for (var m = 0; m < twoArr.length; m++) { if (m != rowIndex) { var tmp2 = twoArr[m][j]; twoArr[m][j] = twoArr[m][j + 1]; twoArr[m][j + 1] = tmp2; } } } } } } } // 设置鼠标经过表头样式 function setActiveCol(activeCol) { activeCol.className = "activecol"; } function setLoseFocusCol(col) { col.className = ""; } // 当鼠标单击cell单元格时,把当前单元格设置为input输入框 function inputValue(cell) { var oldValue = cell.innerHTML.trim(); // 如果已经双击过了,则不做任何动作 var reg = /
"; 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("作者:叶志雄"); } </script>
二维排序表格
列1
列2
列3
列4
列5
列6
行1
行2
行3
行4
行5
说明:
1.排序功能:单击行表头或列表头则进行正序排序;若再次单击,则进行逆序;
2.修改功能:双击某个单元格,则可进行输入操作,当输入框失去焦点时,则新数据被保存;
3.随机功能:每次刷新页面,表格中的数据都不一样;
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/28311/
上一篇:
javascript学习指南_javascript删除字符串中所有空格代码
下一篇:
[php中打开目录并输出目录文件大小]php中打开目录并输出目录文件实现代码
相关推荐
phpstudy_php 数组查找关键函数
javascript学习指南|javascript 支持中英文字符串截取函数
【php中常用hash加密算法】php中常用hash加密函数
javascript学习指南_javascript删除字符串中所有空格代码
asp.net core_asp.net C#读取中文字符代码
javascript学习指南_javascript判断字符出现在字符中代码
php中正则获取url参数_php中正则获取url函数preg_match
【jquery ajax】jquery ui dialog 解决滚动条方法
javascript学习指南_javascript lastIndexOf判断字符串最后出现位置
asp.net生成静态页面_asp.net生成静态页面方法详细说明
网友关注
ps打马赛克怎么操作|ps打造颓废的非主流效果图片
javascript学习指南|javascript 判断当前页面有指定id
[js图片上传预览插件]js图片上传预览兼容ie6 ie8
php字符比较函数|php字符比较函数similar_text strnatcmp strcasecmp
[asp.net core]asp.net ToString格式大全与Convert.ToString区别
【让iis支持php】让iis支持PHP,ISAPI或CGI,FastCGI配置方法
[腾讯读书手机用户]手机用户已达8亿 第五媒体将成主流
【phpstudy】php convert_uuencode() 与 convert_uuencode 函数
phpstudy_php 把查询字符串解析到变量中
asp.net core_asp.net取得复选框值代码
热门标签
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
[php中打开目录并输出目录文件大小]php中打开目录并输出目录文件实现代码
php常
[关于css图片缓存在ie6中解决方法]关于css图片缓存在ie6中解决方法
php常
php文件读写权限|php文件读写操作实例代码
php常
【php字符串中是否包含某个字符】php中fsockopen详细实例代码
php常
php socket_php中socket常用实例
php常
ip地址合法性判断_判断IP的来源是电信还是网通
php常
[asp中如何结束语句]asp中实用分页程序代码
php常
【身份证号码验证查询系统】javascript身份证号码验证实例代码
php常
网页开发自学_网页开发中常用javascript注册验证正则
php常
【php动态生成二维码】php动态生成饼图代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有