精华内容
下载资源
问答
  • 效果图如下: ...主要的JS代码如下: var tbody = document.querySelector('#tableSort').tBodies[0]; var th = document.querySelector('#tableSort').tHead.rows[0].cells; var td = tbody.rows;...
  • 原生js table表格插件制作表格自动排序效果
  • HTML表格自动排序

    2020-12-08 19:18:59
    jquery-tablesort jquery-tablesort下载地址 <html> <head> <meta charset="utf-8" /> <title>table ... script> tablesorter可以看作是jquery-tablesort的升级版,最重要的就是可以自动探测数据类型。 相关资源下载

    jquery-tablesort

    在这里插入图片描述

    jquery-tablesort下载地址

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>table sort</title>
        <style type="text/css">
            * {
    			margin: 0;
    			padding: 0;
    		}
    
    		body {
    			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    			color: #4f6b72;
    			background: #E6EAE9;
    		}
    
    		#container {
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			width: 100vw;
    			margin: 0 auto;
    		}
    
    		table {
    			width: 90%;
    			max-width: 500px;
    			font-size: 18px;
    			text-align: center;
                margin-top: 50px;
    		}
    
    		th {
    			color: white;
    			font-size: 20px;
    			border-right: 1px solid #C1DAD7;
    			border-bottom: 1px solid #C1DAD7;
    			border-top: 1px solid #C1DAD7;
    			text-transform: uppercase;
    			background:#b6b6f0;;
    		}
    
    		tr{
    			height: 45px;
    		}
    
    		tr:nth-child(odd){
    			background: #e6e6fa;
    		}
    
    		tr:nth-child(even){
    			background:#fff0f5;
    		}
    
    		td {
    			border-right: 1px solid #C1DAD7;
    			border-bottom: 1px solid #C1DAD7;
    			color: #4f6b72;
    		}
        </style>
    </head>
    
    <body>
        <div id="container">
            <table id="mytable" class="tablesorter">
                <thead>
                    <tr>
                        <th class="number">ID</th>
                        <th>姓名</th>
                        <th class="number">年龄</th>
                        <th>手机号</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>Colin</td><td>83</td><td>18071495984</td></tr>
                    <tr><td>2</td><td>Van</td><td>83</td><td>13493101185</td></tr>
                    <tr><td>3</td><td>Bryson</td><td>86</td><td>13968022555</td></tr>
                    <tr><td>4</td><td>Buzz</td><td>35</td><td>13396955543</td></tr>
                    <tr><td>5</td><td>Eve</td><td>41</td><td>13162916570</td></tr>
                    <tr><td>6</td><td>May</td><td>49</td><td>13827627303</td></tr>
                    <tr><td>7</td><td>Andrew</td><td>1</td><td>18972447915</td></tr>
                    <tr><td>8</td><td>Barry</td><td>81</td><td>13821180076</td></tr>
                    <tr><td>9</td><td>Zona</td><td>94</td><td>18203785299</td></tr>
                    <tr><td>10</td><td>Buddy</td><td>36</td><td>13820188549</td></tr>
                    <tr><td>11</td><td>Eve</td><td>32</td><td>13136522747</td></tr>
                    <tr><td>12</td><td>Buddy</td><td>19</td><td>18988837209</td></tr>
                    <tr><td>13</td><td>Kevin</td><td>24</td><td>13369797796</td></tr>
                    <tr><td>14</td><td>Zora</td><td>58</td><td>13275207716</td></tr>
                    <tr><td>15</td><td>Hailey</td><td>16</td><td>15974349897</td></tr>
                    <tr><td>16</td><td>Bahar</td><td>95</td><td>15288586467</td></tr>
                    <tr><td>17</td><td>Bahar</td><td>60</td><td>13068296336</td></tr>
                    <tr><td>18</td><td>Joyce</td><td>71</td><td>15969630424</td></tr>
                    <tr><td>19</td><td>Angelia</td><td>16</td><td>18279554860</td></tr>
                    <tr><td>20</td><td>Lance</td><td>27</td><td>15842451834</td></tr>                
                </tbody>
            </table>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.tablesort.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#mytable").tablesort();
            $('thead th.number').data('sortBy', function(th, td, sorter) {
    			return parseInt(td.text(), 10);
    		});
        });
    </script>
    

    tablesort默认是使用字符串排序,可以通过将某列转换为具体的类型来实现自定义排序。

    例如,上面例子中将指定的列转换为int类型再进行排序。

    注意:必须包含THEAD和TBODY,否则表头也会参与排序。

    tablesorter

    tablesorter文档
    tablesorter下载
    tablesorter示例

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8" />
    	<title>table sort</title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    
    		body {
    			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    			color: #4f6b72;
    			background: #E6EAE9;
    		}
    
    		#container {
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			width: 100vw;
    			margin: 0 auto;
    		}
    
    		table {
    			width: 90%;
    			max-width: 500px;
    			font-size: 18px;
    			text-align: center;
    			margin-top: 50px;
    		}
    
    		th {
    			color: white;
    			font-size: 20px;
    			border-right: 1px solid #C1DAD7;
    			border-bottom: 1px solid #C1DAD7;
    			border-top: 1px solid #C1DAD7;
    			text-transform: uppercase;
    			background: #b6b6f0;
    			;
    		}
    
    		tr {
    			height: 45px;
    		}
    
    		tr:nth-child(odd) {
    			background: #e6e6fa;
    		}
    
    		tr:nth-child(even) {
    			background: #fff0f5;
    		}
    
    		td {
    			border-right: 1px solid #C1DAD7;
    			border-bottom: 1px solid #C1DAD7;
    			color: #4f6b72;
    		}
    	</style>
    </head>
    
    <body>
    	<div id="container">
    		<table id="mytable" class="tablesorter">
    			<thead>
    				<tr>
    					<th class="number">ID</th>
    					<th>姓名</th>
    					<th class="number">年龄</th>
    					<th>手机号</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>Colin</td>
    					<td>83</td>
    					<td>18071495984</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>Van</td>
    					<td>83</td>
    					<td>13493101185</td>
    				</tr>
    				<tr>
    					<td>3</td>
    					<td>Bryson</td>
    					<td>86</td>
    					<td>13968022555</td>
    				</tr>
    				<tr>
    					<td>4</td>
    					<td>Buzz</td>
    					<td>35</td>
    					<td>13396955543</td>
    				</tr>
    				<tr>
    					<td>5</td>
    					<td>Eve</td>
    					<td>41</td>
    					<td>13162916570</td>
    				</tr>
    				<tr>
    					<td>6</td>
    					<td>May</td>
    					<td>49</td>
    					<td>13827627303</td>
    				</tr>
    				<tr>
    					<td>7</td>
    					<td>Andrew</td>
    					<td>1</td>
    					<td>18972447915</td>
    				</tr>
    				<tr>
    					<td>8</td>
    					<td>Barry</td>
    					<td>81</td>
    					<td>13821180076</td>
    				</tr>
    				<tr>
    					<td>9</td>
    					<td>Zona</td>
    					<td>94</td>
    					<td>18203785299</td>
    				</tr>
    				<tr>
    					<td>10</td>
    					<td>Buddy</td>
    					<td>36</td>
    					<td>13820188549</td>
    				</tr>
    				<tr>
    					<td>11</td>
    					<td>Eve</td>
    					<td>32</td>
    					<td>13136522747</td>
    				</tr>
    				<tr>
    					<td>12</td>
    					<td>Buddy</td>
    					<td>19</td>
    					<td>18988837209</td>
    				</tr>
    				<tr>
    					<td>13</td>
    					<td>Kevin</td>
    					<td>24</td>
    					<td>13369797796</td>
    				</tr>
    				<tr>
    					<td>14</td>
    					<td>Zora</td>
    					<td>58</td>
    					<td>13275207716</td>
    				</tr>
    				<tr>
    					<td>15</td>
    					<td>Hailey</td>
    					<td>16</td>
    					<td>15974349897</td>
    				</tr>
    				<tr>
    					<td>16</td>
    					<td>Bahar</td>
    					<td>95</td>
    					<td>15288586467</td>
    				</tr>
    				<tr>
    					<td>17</td>
    					<td>Bahar</td>
    					<td>60</td>
    					<td>13068296336</td>
    				</tr>
    				<tr>
    					<td>18</td>
    					<td>Joyce</td>
    					<td>71</td>
    					<td>15969630424</td>
    				</tr>
    				<tr>
    					<td>19</td>
    					<td>Angelia</td>
    					<td>16</td>
    					<td>18279554860</td>
    				</tr>
    				<tr>
    					<td>20</td>
    					<td>Lance</td>
    					<td>27</td>
    					<td>15842451834</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </body>
    
    </html>
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
    	$(function () {
    		$("#mytable").tablesorter();
    	});
    </script>
    

    tablesorter可以看作是jquery-tablesort的升级版,最重要的就是可以自动探测数据类型。

    相关资源下载

    展开全文
  • 分享一款原生js table表格自动排序效果,个人感觉很好用
  • Excel表格如何自动排序.docx
  • Excel表格中根据身份证号码自动填出生日期、计算年龄,利用WPS的函数功能,只需要设置一下相应的参数,把一个个隐藏在身份证号码 里的信息提取出来,完成上面所有操作用时也不到半小时,将所得到的表格美化一下,就...
  • 易语言高级表格排序示例,程序模仿易语言例程里面的高级列表框排序写成.
  • 易语言高级表格排序

    2015-03-19 22:39:48
    易语言编程高级表格排序功能,不支持单击高级表格表头,只适合按钮排序
  • 易语言高级表格各列同步排序源码,高级表格各列同步排序,自动编号,填充随机数据,高级表格排序,设置排序方向,快速排序
  • Excel表格数据如何自动排序动画教程.docx
  • WPS表格怎么设置自动排列序号?.docx
  • excel表格中序号编号是比较常用的,有时候修改内容之后,经常忘记更新编号,那么excel表格怎么设置自动编号呢?下面给大家介绍一种excel表格中设置自动编号的方法,希望对大家有所帮助。打开一张需要设置序号编号的...

    excel表格中序号编号是比较常用的,有时候修改内容之后,经常忘记更新编号,那么excel表格怎么设置自动编号呢?

    下面给大家介绍一种excel表格中设置自动编号的方法,希望对大家有所帮助。

    打开一张需要设置序号编号的Excel表格,在要显示编号的单元格中输入完整公式为:【=row()-2】,然后填充其他序号单元格即可。

    释义:row()是指当前行数,减去2就是 行数减去2。

    比如:

    • row()-2 是在 A1 单元格 中就是 1-2=-1
    • row()-2 是在 A2 单元格 中就是 2-2=0
    • row()-2 是在 A3 单元格 中就是 3-2=1
    • row()-2 是在 A4 单元格 中就是 4-2=2
    • 依此类推
    5b0d6844c904f002ceae59582c199905.png

    选中其中一行,进行删除,删除之后,序号自动变化。

    结果展示:

    2f647e594706f3cb41205f1fa86116e6.gif
    展开全文
  • WPS文档标题自动排序的方法,针对WPS文字中标题自动排序操作说明
  • react-data-components - React表格组件具有排序、过滤和分页功能
  • jquery表格自动排序插件,非常好用。
  • 您的商品会按日期自动排序,因此您可以轻松查看接下来的内容。 对于长期任务,您可以选择提前提醒,甚至跟踪您的进度。 您还可以将项目导出到Google日历! 取得副本 只需复制。 如何 新增项目 转到Planner表上的第...
  • 主要介绍了JS实现的表格操作类,可实现针对表格的添加,删除,排序,上移,下移等操作,具有一定参考借鉴价值,需要的朋友可以参考下
  • excel自动排序公式

    2013-12-25 07:51:28
    几个实用的函数,你可以用它自动排序。 重要****学生成绩排序公式: =SUMPRODUCT((B$2:B$100>B2)/(COUNTIF(B$2:B$100,B$2:B$100)))+1
  • Excel:筛选后序号自动排序

    千次阅读 2020-06-09 09:22:18
    excel筛选后序号自动排序

    首先打开excel表格,按住ctrl连续序号。

    然后筛选一些人名后,发现时序号不连续了。

    右侧重新创建一个序号列,输入=subtotal,选择3。

    输入完整公式=subtotal(3,B$2:B2)。

    选中序号后,按住ctrl+enter后刷新序号,此刻连续。

    重新筛选发现,把右侧序列刷新,序号还是连续的。

    或者在单元格中输入=ROW(A1),然后按回车键。

    展开全文
  • 点击标记按照升序/降序重新排列HTML表的行数。 ###重要内容###启用后,点击表格标题(“ 支持语言:English
  • EXCEL/WPS小技巧(自动填充排序,身份证生日号码的提取)Excel/wps的自动填充排序方法一方法二身份证生日号码的提取 Excel/wps的自动填充排序 方法一 Excel和wps的操作方法一样,以Excel为例 从1开始排序为例: 1....

    EXCEL/WPS小技巧(自动填充排序,身份证生日号码的提取)

    Excel/wps的自动填充排序

    方法一

    Excel和wps的操作方法一样,以Excel为例
    从1开始排序为例:
    1.打开Excel表格,同一列的前两个格子分别输入1,2,如下图:
    在第一列输入序号1,2
    2.鼠标左键单击输入1的方格,鼠标指向右下角会出现一个小黑的十字架,再把十字架向下拉,以此自动补充排序,如果出现下拉是一直复制第一个数可点击小格子旁边的加号框点击选择填充。具体步骤如下视频链接:具体操作视频

    方法二

    1.先输入数字1,再点击右上方“填充”,选择序列,如图:
    先输入数字1,再点击右上方“填充”,选择序列
    2.选择序列后弹出框,列排序选择列,如果需要横行排序就选择行,类型如果按照12345递增顺序就选择线性,步长为1,终止值为你需要排到几就写几,我需要20个数字,终止值就输入20.点击确定即可
    请添加图片描述
    完成

    身份证生日号码的提取

    利用函数MID(身份证号所在的格子位置,7,8)
    身份证号所在的位置列字母+行数字,7表示从第七个数字开始,8表示数8个,如下图身份证号所在位置为A2(该身份证号是随便输入的),身份证号对应的年月日的表格输入=MID(A2,7,8),然后点击回车即可
    请添加图片描述
    回车后成功显示
    操作完成

    展开全文
  • 部长突然发给你一份你们班的团员名单,要求你把团员的信息填上去,且不能改变名单上人员的顺序。你拥有你们班的同学信息的表格,但是是以学号排序的,所以并不能直接按列复制粘贴。
  • 表格删除序列号自动排列序号

    千次阅读 2017-09-06 19:46:09
    Document .div-1{ width:100px; height: 100px; background-color: red; } table,tr,td{ border:1px solid #CCC; border-coll
  • 利用javaScript技术实现表格排序
  • 想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么Ajax提交。后台有无数个新增和编辑的视图页,现在想想真是恐怖啊,看着都累。后面接触到kendoui的grid组件,看到只需要...
  • 应用场景下图表格为XXX口腔医院部分服务项目价目表,我们想在"序号"列添加可以随着项目的增减自动进行调整的序号,样式为:1 2 3……,且数字序号在单元格中居中排列。操作步骤1、鼠标选中要添加自动序号的所有...
  • 默认按某一列排序,在该表格的存储单元里配置 sortable:true, sorters:[{property:"CODEPOOL",direction:"ASC"}], //给定一个默认的排序方式 ASC为升序 DESC为降序 如下 var store0 = new Ext.data.Store({ ...
  • 一款android自动生成表格框架: 快速配置自动生成表格自动计算表格宽高; 表格列标题组合; 表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题...
  • 超轻量级,根据JSON数据自动生成表格,接口灵活多样可配置,内置分页,排序等功能。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,209
精华内容 40,083
关键字:

做表格怎样自动排序号