TD排序（1）

最新推荐文章于 2021-03-29 04:11:43 发布
原创 最新推荐文章于 2021-03-29 04:11:43 发布 · 596 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#null

本文介绍了一个用于网页中表格列排序的JavaScript函数。该函数通过保存原始表格内容并在点击表头时切换显示来实现列排序效果。适用于需要基本交互功能的网页表格应用。

<html>
 <head>
  <title>test</title>
  <script>
 function tableColumnSort(o)  
{ 
    if(o.sortTempInner==null)
    {
        o.sortTempInner=o.innerHTML
    }
    else
    {
     o.innerHTML=o.sortTempInner;
    }

    var allColNum=o.parentElement.children.length;
 var colNum=0;
 
 for (i=0;i<allColNum;i++)
    {
        if (o.parentElement.children[i].sortTempInner!=null)
        {
            o.parentElement.children[i].innerHTML=o.parentElement.children[i].sortTempInner;
        }
   
        if (o.parentElement.children[i]==o)
        {
            colNum=i;
        }
    }
   
    headEventObject=event.srcElement; 
   
    headEventObject=o;
   
       
    while (headEventObject.tagName!="TR")
    {
        headEventObject=headEventObject.parentElement;
    }

    for (i=0;i<headEventObject.children.length;i++)  
    {
        if (headEventObject.children[i]!=o)
        {
            headEventObject.children[i].clickedTag='listTableHead';
        }
    }

m15874040719
关注
table的td整列拖动交换以及重新排列位置
06-02
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
jQuery html表格排序插件tablesorter使用方法详解
12-10
1. **指定CSS类**：给需要排序的表格添加一个特定的CSS类，例如`class="sort-table"`，这样tablesorter就能知道哪些表格需要排序功能。 2. **使用thead和tbody**：使用`<thead>`和`<tbody>`标签来分别定义表格的...
TD排序(2)
m15874040719的专栏
03-26 233
TD排序(4)
m15874040719的专栏
03-26 240
table自定义排序
IT小生
05-20 3228
实际上表格的排序就是把要排序的那列(或行),的值存在一个数组中,然后对数组用比较函数进行排序,然后再对表格内容进行替换. 思想:考虑代码的简单易用及可重复; 现在举例说明,以列排序为例; 1)表格的规范: 因为排序是在同类型之间进行的,比如:字符串,数字,日期;然而,用来触发排序事件的表头和该列数据的类型可能不同,所以在生成表格的时候最好将表头和下面的内容分开.以免在取值的时候还要对表头进
JS实现table表格数据排序功能(可支持动态数据+分页效果)
11-22
1. **HTML表格**: HTML中的`<table>`元素用于创建表格，`<tr>`表示表格行，`<td>`表示表格单元格。在实现排序功能时，我们需要对这些元素进行操作。 2. **JavaScript基础**: 代码中用到了JavaScript的基本语法，...
根据表格中的某一列进行排序的javascript代码
12-07
`sortAge`是主函数，负责调用和管理排序过程，而`sort`函数则是实际执行排序操作的辅助函数。 1. `sortAge`函数： - 首先，通过`document.getElementsByTagName('table')[0]`获取到表格元素。 - 然后，使用`rows`...
JavaScript实现表格点击排序的方法
12-07
<td>数据1_1</td> <td>数据1_2</td> <!-- 更多单元格 --> <!-- 更多行 --> ``` 在CSS部分，我们定义了表格及其元素的样式，包括边框、内边距、字体大小和颜色等，以使其看起来更专业。此外，还定义了一些...
精选资源
antd table按表格里的日期去排序操作
01-18
根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去...
js实现td排序及分组分类
weixin_33744854的博客
09-12 601
如题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
td中内容的垂直方向的排列问题
包子大叔的笔记
04-10 1797
[code="java"] td中的元素默认是垂直居中 valign属性能控制居中的位置 例如 valign=top valign=middle valign=bottom valign=baseline //与基线对其 [/code]
php table字段排序,jquery实现table排序功能实例分享
weixin_28745525的博客
03-24 190
本文主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下，希望能帮助到大家。Documentp{width: 1024px;margin: 0 auto; /*p相对屏幕左右居中*/}table{border: solid 1px #666;border-collapse: collapse;width: 100%;...
Teradata 的rank() 和 row_number() 函数
weixin_34392906的博客
06-17 1509
Teradata数据库中也有和oracle类似的分析函数，功能基本一样。示例如下： RANK() 函数 SELECT * FROM salestbl ORDER BY 1,2; storeid prodid sales----------- ------- ---------1001 A ...
php中td标签按字母排序排序,在PHP中使用opendir（）按字母顺序排序和显示目录列表...
weixin_29252859的博客
03-29 139
php noob在这里-我将这个脚本拼凑在一起，以显示带有opendir的文件夹中的图像列表，但是我无法弄清楚如何(或在哪里)按字母顺序对数组进行排序// opens images folderif ($handle = opendir('Images')) {while (false !== ($file = readdir($handle))) {// strips files extensi...
TDBGrdEh标题排序
weixin_30832351的博客
06-09 96
参考图文教程：https://wenku.baidu.com/view/86605a7caaea998fcd220e1f.html 官方dbgrid组件无法自动排序，需要手工写代码；用TDBGrdEh标题排序可以设置带图标三角形，效果如下： 自动排序并显示标记（▽降序△升序） DBGridEh组件可以在标题行单元格中显示小三角形升、降排序标志符图片，在运行时可点击标题行，图片自动...
layui td排序
09-07
在使用 layui 表格组件进行排序时，你可以按照以下步骤操作： 1. 在 HTML 中定义一个基本的表格结构，使用 layui 的表格组件。例如： ```html <table id="demo" lay-filter="test"></table> ``` 2. 在 JavaScript 中，使用 layui 的表格模块进行初始化，并配置排序功能。例如： ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/your/data/url', // 设置数据接口 page: true, // 开启分页 cols: [[ {field: 'id', title: 'ID', sort: true}, // 设置需要排序的字段 {field: 'name', title: '姓名'}, {field: 'score', title: '分数', sort: true}, ]] }); }); ``` 在上面的代码中，`sort: true` 表示该字段支持排序。 3. 当用户点击表头时，会自动触发排序事件。你可以监听 `sort` 事件，获取排序参数，并重新加载表格数据。例如： ```javascript table.on('sort(test)', function(obj){ // obj.field 为当前排序的字段名 // obj.type 为当前排序的类型，可能的值有：desc（降序）、asc（升序）、null（默认排序） // 重新加载表格数据 table.reload('demo', { initSort: obj, // 设置初始排序参数 where: { field: obj.field, // 将排序字段传递到后端 order: obj.type // 将排序类型传递到后端 } }); }); ``` 在这里，你可以根据 `obj.field` 和 `obj.type` 来发送请求，获取排序后的数据。 这样，通过以上步骤配置后，你的 layui 表格就支持排序功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值