JavaScript 对表格排序

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量283 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript document sort
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
        作者：hyzhang
        时间：2017-10-12
        描述：表格排序
        -->
<script>
window.οnlοad=function(){
var oTbe = document.getElementById("tbe");
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
//var oTr = oUl.getElementsByTagName("tr");
var arr = [];
for (var i=0;i<oTbe.tBodies[0].rows.length;i++) {
arr[i] = oTbe.tBodies[0].rows[i];
}
arr.sort(function(tr1,tr2){
var n1 = parseInt(tr1.cells[0].innerHTML);
var n2 = parseInt(tr2.cells[0].innerHTML);
return n1-n2;
})
for (var i =0;i<arr.length;i++) {
oTbe.tBodies[0].appendChild(arr[i])
}
}

}
</script>
<input type="button"  id="btn" value="排序" />
<table id="tbe" width="300" border="1">
<thead>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>4</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>9</td>
<td>前六</td>
<td>33</td>
</tr>
<tr>
<td>2</td>
<td>前六</td>
<td>33</td>
</tr>
</tbody>
</table>
</body>
</html>




<!--


1,获取点击事件
2,创建一个新的数组arr，并将oTbe.tBodies[0].rows[i]值赋给arr[i]
3,对arr进行排序
4，将arr添加到eTbe的子节点-->
hyzhang6
关注
专栏目录
JavaScript实现表格的排序
Just The Way You Are
08-06 1744
利用JS实现表格排序，依赖于JS数组中Array对象的sort方法 首先介绍一下sort()方法： 1.定义和用法： sort()方法用于对数组元素的排序 2.语法： arrayObject.sort(sortRule); 3.参数： sortRule ：可选。规定排序顺序。必须是函数。 4.返回值： 对数组的引用。数组在原数组上进行排序，不生成副本。 5.说明： 如果调用该
JavaScript实现表格排序
不忘初心，方得始终
03-16 3292
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html，只能够添加js
JS 做的表格数据排序。。。。。。
08-29
JS 做的表格数据排序。。。。。。很好用的。容易上手。
javascript页面表格排序
Ozone
07-20 146
javascript页面排序 今天项目中需要页面点击表头,按升降排序,查找了各方面资料,根据网上实例,自己改写了一个简单的例子 说到排序,肯定少不了Array Methods 中的 sort(),简单的介绍一下. sort()方法可用来排列数组中的元素,语法是 [code] arrayObject.sort(sortByRequest) [/code] 注释: 1.sor...
《JavaScript高级程序设计》阅读笔记（十九）：表格排序
weixin_34137799的博客
07-30 145
排序代码 function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aT...
js简单实现表格排序
u011927449的博客
01-19 408
昨天看到一篇关于表格排序的随笔，鉴于本人还只会简单的js，不会使用封装，所以自己也试了一下写这个效果。可能不太优化，原理思路是：获取行对象tr，排序tr中要比较的对象td，排序后添加回tbody。如下...
javaScript对表格排序
09-26
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
JavaScript实现表格排序方法
10-27
JavaScript作为前端开发中不可或缺的语言，常被用来实现各种动态交互效果，包括表格排序。本文旨在介绍如何使用JavaScript实现表格排序的方法。 ### 知识点1：JavaScript排序算法的选择 实现表格排序的关键在于...
javascript表格随机排序代码
10-30
1. javascript表格随机排序概念：在Web开发中，我们经常需要对表格中的行或者列进行随机排序，以达到更好的用户体验或者实现某些特定功能。javascript提供了强大的数组操作方法和对象操作方法，可以轻松实现表格的...
javascript实现对表格元素进行排序操作
10-23
JavaScript实现对表格元素进行排序操作的知识点主要包括以下几个方面： 1. 获取表格元素：通过JavaScript的`document.getElementById`方法可以获取到HTML表格元素的DOM对象。在本例中，假设表格的ID为"tabid"，可以...
javascript操作表格排序实例分析
10-24
JavaScript操作表格排序是一个常见的Web开发任务，通常用于对表格数据按照特定规则进行排序，以便于更好地展示给用户。本文档提供了JavaScript实现表格排序的实例分析，涉及了数组排序与表格操作的相关技巧。 首先...
用javascript实现表格排序
qq_22187867的博客
05-18 475
初始的表格如图： 当点击表头中的”力量“时，表格会根据力量值的大小，升序排练，如下图： 当再次点击表头中的力量时，表格会根据力量值的大小，降序排列，如下图： 点击其他的表头也能达到同样的效果。 具体代码如下： 无标题文档 姓名力量敏捷智力 A172413 B152216 C191520 D201418
利用js对表格进行排序
跳跃的心灵
05-20 180
利用js对表格进行排序，本人觉得很有用，把书上的代码打出来给大家看看。 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function convert(sValue,sDataType) {    switch(sDataType)   {      case "int":      return parseInt(...
javascript表格排序
weixin_30794491的博客
11-25 80
表单排序的方法有很多种，网上的函数库也是百花齐放，下面是个人认为比较好用的方法： 1.简单的表格排序：参看demo 1 newSortedTable('sortTable'); 2.稍微复杂点的表格排序，涉及到一个tr后面还有一个隐藏的tr算是一对数据的，具体可以参看我之前做的项目：IQM即时监测（点击全部数据列表->时间列点击查看效果）。 本文链接：javascr...
js对表格进行排序
dfc_xiaoke的博客
09-26 5568
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格搜索&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; wi
javascript操作表格排序
楓雨人生
03-15 1119
 javascript操作表格排序 来源：misc.blogjava.net   表格排序，一般的处理方法是传递排序的字段到后台进行重新查询并排序，javascript也可以做
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 929
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
JavaScript表格动态排序实现教程
这个JavaScript表格排序方法的核心在于结合HTML、CSS和JavaScript来实现数据的动态排序，并提供用户友好的交互反馈。通过理解这些知识点，开发者可以构建一个功能完备的表格排序功能，适应各种网页应用的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值