JavaScript表格排序（多列，不同数据类型）

最新推荐文章于 2021-09-26 18:04:54 发布
最新推荐文章于 2021-09-26 18:04:54 发布
阅读量1k 收藏
点赞数
文章标签： javascript function date border float

<html>
<body>
<script type="text/javascript">
function convert(sValue,sDataType){
  switch(sDataType){
       case "int": return parseInt(sValue);
       case "float": return parseFloat(sValue);
       case "date": return new Date(Date.parse(sValue));
       default: return sValue.toString();
 }
}

function generateCompareTRs(iCol,sDataType){
  return function compareTRs(oTR1,oTR2){
  var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
  var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
  if(vValue1<vValue2){
    return -1;
  }else if(vValue1>vValue2){
    return 1;
  }else{
   return 0;
  }
 }
}

function sortTable(sTableID,iCol,sDataType){
 var oTable=document.getElementById(sTableID);
 var oTBody=oTable.tBodies[0];
 var colDataRows=oTBody.rows;
 var aTRs=new Array;
 
 for(var i=0;i<colDataRows.length;i++){
   aTRs[i]=colDataRows[i];
 }
 if (oTable.sortCol==iCol){
   aTRs.reverse();
 }else{
 aTRs.sort(generateCompareTRs(iCol,sDataType));
 }
 var oFragment=document.createDocumentFragment();
 for(var i=0;i<aTRs.length;i++){
  oFragment.appendChild(aTRs[i]);
 }
 oTBody.appendChild(oFragment);
 oTable.sortCol=iCol;
}

 
</script>
 <table border="1" id="tblSort">
  <thead>
   <tr>
     <th οnclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th>
     <th οnclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
     <th οnclick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
     <th οnclick="sortTable('tblSort',3,'int')" style="cursor:pointer">Siblings</th>
   </tr>
  </thead>
  <tbody>
    <tr>
       <td>Smith</td>
       <td>John</td>
       <td>7/12/1978</td>
       <td>2</td>
    </tr>
    <tr>
       <td>Johnson</td>
       <td>Betty</td>
       <td>10/15/1977</td>
       <td>4</td>
    </tr>
    <tr>
       <td>Henderson</td>
       <td>Nathan</td>
       <td>2/25/1949</td>
       <td>1</td>
    </tr>
    <tr>
       <td>Williams</td>
       <td>James</td>
       <td>7/8/1980</td>
       <td>3</td>
    </tr>
 </tbody>
</table>
</body>
</html>

CYZERO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端技术】还在为前端js排序多列而发愁吗？一文教你学会使用thenBy.js
W's play ground
05-07 996
什么是thenBy.js thenBy.js是一个javascript微型库，它可以对多列的数组进行排序（且可以满足不同列按不同的升序或降序进行排序）。它使用原生JavaScript的sort();方法，但不同的是thenBy.js可以传入多个函数例如firstBy().thenBy().thenBy()组成的函数来对数组进行多列排序。 如何安装 1.使用npm或yarn安装...
Js中的多条件排序，多列排序
weixin_34119545的博客
01-22 597
參见github： https://github.com/Teun/thenBy.js
如何根据数组中每一项的某个非数字属性进行排序
Mengfei_Cao的博客
08-17 927
根据数组中每一项的某个非数字属性进行排序 话不多说，直接上代码： var arr = [ {name:'zhangsan',age:5}, {name:'lisi',age:23}, {name:'wangwu',age:8} ]; function compareFunction(property){ return function( a, b ){ ...
js之对列表对象进行多列排序
qq_27577113的博客
09-26 1568
对列表对象进行排序，多列排序要使用稳定排序算法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sortForList</title> </head>
33种Javascript 表格排序控件收集
10-29
以下是对33种JavaScript表格排序控件的详细说明： 1. jQuery tablesorter（1）：这是一个基于jQuery的插件，支持多种类型的排序，包括数字、日期和自定义排序。它具有高度可定制性，允许用户添加自定义排序标志和...
JavaScript实现表格点击排序的方法
10-24
函数`getTextValue`用于获取单元格的文本值，`isNumericCol`用于判断指定列是否为数值类型，这样可以根据数据类型选择合适的排序方式。 ```javascript function getTextValue(cell) { return cell.textContent....
javascript 二维排序表格代码
10-28
这个JavaScript代码示例展示了如何创建这样一个功能丰富的表格，包括排序、编辑和随机数据生成等功能。下面将详细解释代码的工作原理和关键知识点。 首先，这个表格的主要功能是排序。当用户单击表格的列头（th元素...
JavaScript实现表格排序，点击表头切换升序降序，非常简单
08-27
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
表格排序
01-11
`tablesort.js` 是一个用于表格排序的JavaScript库，而 `jquery-1.9.0.min.js` 是jQuery的轻量级版本，它是一个广泛使用的JavaScript库，提供了更简单、更高效的DOM操作、事件处理和动画功能。 首先，我们要理解...
js Table 选中行排序 多列锁定（多个OrderBy）
06-03
比较乱~没来得及优化 有需要的可以参考 IE6 Opera 测试通过
前端--两个table表的对比及不同单元格内容样式按要求设定
liuyancainiao的博客
07-22 1986
主要是领导这边有要求做个table的对比，另外表格中内容不同的单元格要设定一定的样式，比如说背景置为红色之类的，所以参考网上的一些方案，写了个还算是通用的方法，大家如果有需要可以copy过去，改一改直接用就好了： //用来对比两个表格单元格的内容，不同的地方附加样式（样式以后可以改成传递方式） function casTableContent(currTable, temptable, differentStyle) { var differentCount = 0; var currT
JavaScript入门（五）操作表格
我的E家
05-25 528
DOM文档对象模型 --操作表格和样式 //thead, tfoot 只能有一个 //tbody可以有多个 //使用DOM创建表格 window.onload=function(){ var table = document.createElement('table'); table.width=300;//table.setAttribute('width',300); table.bo
javascript 把多个数组相互匹配，动态设置商品的多种规格
weixin_45919023的博客
03-16 2028
应用场景 设置商品的多种规格 需求 动态添加多个规格，并给每个规格设置多个属性， 得到各个规格中的各个属性与其他规格中的各个属性相匹配 话不多说，上代码 //每个规格和规格的属性 数据 var data = [ { name:'颜色', specs:['黑','白','灰'] ...
js的table排序,支持多浏览器，多列同时排序，自定义排序
loven_11的专栏
04-21 500
简单且轻松自定义排序规则： 1.initSortTable(asc,desc)；是初始化排序预操作（其实就是传入两张图片地址，标识排序方向的） 2.在需要排序的表格table上添加监听事件，sortColumn()；此处被我限定click事件作用在th对象上才有效的。 3.需要按列制定排序规则，即在th上添加type类型，例如&lt;th type='string'&gt;1&lt;/th&...
js对表格按列进行排序
xihua1244914259的专栏
03-23 3178
js表格按列排序 1、列的th设置一个属性，例如： &lt;table&gt; &lt;tr&gt; &lt;th sort='vppv'&gt;&lt;span &gt;VPPV&lt;/span&gt;&lt;/th&gt; &lt;th sort='uv'&gt;&lt;span &gt;UV&lt;/span&
对于一系列数据通过单击进行排序（每次只能单击一次）
zsf0615020117的专栏
08-30 390
     Table Sort Example                            function generateCompareTRs(iCol) {                        return  function compareTRs(oTR1, oTR2) {                            var sValue1 = oTR1.ce
layui 数据表格 编辑内容
最新发布
08-15
最后，我们还可以通过设置相应的监听事件来实现对表格数据的监听和响应，比如可以监听表格某一列的排序事件、行选中事件等。 总之，layui数据表格提供了便捷的数据展示和编辑功能，可以帮助我们快速搭建一个功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值