社区
JavaScript
帖子详情
js怎么实现页面数据排序 要求table里的第一列不参加排序?
sj13467204146
2019-05-22 09:55:02
js怎么实现页面数据排序 要求table里的第一列不参加排序?
...全文
436
13
打赏
收藏
js怎么实现页面数据排序 要求table里的第一列不参加排序?
js怎么实现页面数据排序 要求table里的第一列不参加排序?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
13 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
麦草CMS
2019-05-22
打赏
举报
回复
<tabel id="t">
<tr><td>1</td>测试1<td></td><td>测试2</td></tr>
<tr><td>2</td>测试3<td></td><td>测试4</td></tr>
</table>
var table = document.getElementById("t");
var rows = table.children;
var td1 = rows[0].children[0];
麦草CMS
2019-05-22
打赏
举报
回复
就如上面所说,你可以后台返回json,而不是html,排序后动态组合表;这个dom操作少点。
或者,你取出要排列的那一列单元格的数据排序,排好了相应的替换就行了。取特定单元格,用古老的children代替childNodes,
table.tr.children[0],table.tr.children[1]
sj13467204146
2019-05-22
打赏
举报
回复
我一直在用getElementById() 试着将排序前的第一列取出来, 一直报错。
sj13467204146
2019-05-22
打赏
举报
回复
这是我排序的源码, 请问怎么改能让第一列不动???
sj13467204146
2019-05-22
打赏
举报
回复
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) { vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); 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]; alert(document.getElementByTagName("th").innerHTML); } if (oTable.sortCol == iCol) { aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for ( var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]); } oTBody.appendChild(oFragment); oTable.sortCol = iCol; }
麦草CMS
2019-05-22
打赏
举报
回复
firstRow = table.querySelector('th');
otherRows = table.querySelectorAll("td");//这是个节点集,你var array = Object.values(otherRows);,你遍历array就是了
sj13467204146
2019-05-22
打赏
举报
回复
关键是排序的时候,数据是一行一行取得,纯js没有后台数据,怎么从一行数据中把第一列取出来???
qq_42966289
2019-05-22
打赏
举报
回复
引用 楼主 sj13467204146 的回复:
js怎么实现页面数据排序 要求table里的第一列不参加排序?
定义一个新数组 把排序的结果放进去
把老数组的第一列 合并新数组的其余列 不就可以了吗?
麦草CMS
2019-05-22
打赏
举报
回复
第一列用th,其他的用td
sj13467204146
2019-05-22
打赏
举报
回复
用html做一张table , 我自己用js实现了排序功能, 要求,在排序的时候,第一列不动, 其他照样排序。
麦草CMS
2019-05-22
打赏
举报
回复
猜测你遇到的问题比帮您解决问题更难。很多都这样,模糊的描述问题。
sj13467204146
2019-05-22
打赏
举报
回复
你很棒, 多谢你的思路。 aTRs[j].insertBefore(aTDs[j], aTRs[j].cells[1]); 插入的是第二个数据。改成0就成功了, 多谢大家,结贴!~
天际的海浪
2019-05-22
打赏
举报
回复
function sortTable(sTableID, iCol, sDataType) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = new Array;
var aTDs = [];
for ( var i = 0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i];
aTDs[i] = aTRs[i].cells[0];
alert(document.getElementByTagName("th").innerHTML); } if (oTable.sortCol == iCol) { aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for ( var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]);
aTRs[j].insertBefore(aTDs[j], aTRs[j].cells[1]);
} oTBody.appendChild(oFragment); oTable.sortCol = iCol; }
js
实现
table
行
排序
=== Sort
Table
Tool.
js
实现
table
行
排序
. === 源码中有详细说明.sort_
table
.html 为示例html. 1.支持的
排序
数据
类型有 Number,String,Date,NoCaseString 2.默认开始为升序,可指定为降序. 3.默认为只
排序
第一个tbody,可指定对所有tbody
排序
. 4.IE8 ,Firefox/3.6.24 下测试通过
js
对
Table
排序
经典
用
js
实现
点击表头对
Table
排序
,支持td中包含html标签,支持tr,td的原来样式不丢失,支持选择从第几行开始
排序
,支持时间,小数,整数和字符的
排序
BootStrap
Table
表格利器通用教材
适用人群开发从业人员,产品原型人员,IT相关从业人员,想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面,固定表头,完全可配置,支持data属性,显示/隐藏列,显示/隐藏表头,使用AJAX获取
JS
ON
数据
,点击表头可简单的进行
排序
,支持自定义列显示,支持单/复选,强大的分页功能,支持名片布局,支持多语言动态列:导出各种格式(支持xls,xlsx的office2003-office2019)
原生
JS
实现
HTML-
TABLE
自动行合并插件
类功能描述:该插件生成一个具有行合并的列表
数据
,合并例由开发者指定。 开发者提供已
排序
的
数据
列表以及需要合并行的列名即可,无需后端二次处理
数据
。 该类以纯原生
JS
编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.
js
中的注释说明。 mergerow.html为具体事例。
js
实现
表格中列的
排序
js
实现
table
表列的
排序
声明:本例子根据《JavaScript高级程序设计》(作者 Nicholas C.Zakas) 该书第12章进行改写,主要是把表列排列的属性和方法封装到了一个对象中去
JavaScript
87,904
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章