<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>table order</title>
<script type="text/javascript">
function _order(_index,orderType){//param1：列标;param2:升序或降序排列
var tabDiv = document.getElementById("tabDiv");
var trs = tabDiv.getElementsByTagName("tr");
var ot = "asc";
if(orderType == "asc"){
ot = "desc";
}
//从新设置点击th列头的click事件
trs[0].getElementsByTagName("th")[parseInt(_index)]
.setAttribute("onclick","_order('"+_index+"','"+ot+"')");
//存取被排序列所有列值 ，元素格式 obj ={tr索引,列值}
//列值用来排序，tr索引用来排序后找到对应tr
var vals = [];
for(var i=1;i<trs.length;i++){
var tds = trs[i].getElementsByTagName("td");
for(var j=0;j<tds.length;j++){
if(j==_index){//只获取索引于被点击th索引相同的td，即同一列
//获取对应元素
var obj = {"trIndex":i,"tdVal":tds[j].innerHTML};
vals.push(obj);
}
}
}
//判断排序方式
if(orderType=="asc"){
vals = array_order_asc(vals);
}else{
vals = array_order_desc(vals);
}
//排序后，重绘table
var cont=trs[0].innerHTML;
for(var k=0;k<vals.length;k++){
cont +="<tr>"+trs[vals[k].trIndex].innerHTML+"</tr>";
}
var dv =document.getElementById("tabDiv");
dv.innerHTML = "<table border='1' >"+cont+"</table>";
}
//排序 冒泡，只按td中字符的char值比较，中文不考虑
//asc
function array_order_asc(arr){
for(var i=0;i<arr.length;i++){
for(var j = 0;j<arr.length-i-1;j++){
var size = arr[j].tdVal.length;
if(arr[j+1].tdVal.length<size){//比较次数按列值最短的
size = arr[j+1].tdVal.length;
}
for(var m = 0;m<size;m++){
var char1 = arr[j].tdVal.charAt(m);
var char2 = arr[j+1].tdVal.charAt(m);
if(char1==char2){//对应位置字符相等，继续比较下一位
continue;
}
if(char1>char2){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
break;
}
}
}
return arr;
}
//desc
function array_order_desc(arr){
for(var i=0;i<arr.length;i++){
for(var j = 0;j<arr.length-i-1;j++){
var size = arr[j].tdVal.length;
if(arr[j+1].tdVal.length<size){
size = arr[j+1].tdVal.length;
}
for(var m = 0;m<size;m++){
var char1 = arr[j].tdVal.charAt(m);
var char2 = arr[j+1].tdVal.charAt(m);
if(char1==char2){
continue;
}
if(char1<char2){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
break;
}
}
}
return arr;
}
</script>
</head>
<body>
<div id="tabDiv" >
<table border='1'>
<tr>
<th></th>
<th onclick="_order('1','asc')" style="cursor:hand">a</th>
<th onclick="_order('2','asc')" style="cursor:hand">b</th>
</tr>
<tr>
<td>1</td>
<td>shanghai</td>
<td>one</td>
</tr>
<tr>
<td>2</td>
<td>beijing</td>
<td>two</td>
</tr>
<tr>
<td>3</td>
<td>jinan</td>
<td>three</td>
</tr>
<tr>
<td>4</td>
<td>qingdao</td>
<td>four</td>
</tr>
<tr>
<td>5</td>
<td>guangzou</td>
<td>five</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
表格用法：$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })
3. JavaScript或jQuery实现排序 要实现表格排序，我们需要监听表头单元格的点击事件，根据点击的列对数据进行排序，并重新渲染表格。这里可以使用原生JavaScript或者引入jQuery库来简化操作。以下是一个简单的...
在实际开发中，我们可以使用JavaScript库，如Hammer.js，来简化触摸事件的处理，同时结合CSS3的transform属性来实现平滑的动画效果。此外，为了优化性能，可能需要使用虚拟列表（Virtual Scrolling）技术，只渲染...
《vxe-table：Vue.js表格解决方案深度解析》 在当今的Web开发中，表格作为一种重要的数据展示和交互组件，被广泛应用于各种业务场景。vxe-table是基于Vue.js框架的一个强大且灵活的表格解决方案，其版本v4.5.20在...
在IT领域，jQuery的treetable插件是一个非常...通过合理的HTML结构、JavaScript初始化以及可能的扩展功能，我们可以创建出功能强大且用户友好的树形table。这个插件的灵活性和易用性使其成为许多项目中的首选解决方案。
对于复杂的编辑需求，可以引入插件如DataTables，它提供了丰富的可编辑表格功能，并集成了排序、过滤和搜索等特性。 总之，利用JQuery实现可编辑的表格，不仅提升了用户交互性，还增强了网页的数据管理能力。在实际...
- 操作简便：与普通的表格相比，树形表格增加了展开、折叠、排序等交互功能，用户可以更直观地处理复杂数据。 - 数据绑定：支持动态加载子节点，减少一次性加载大量数据带来的性能问题。 - 自定义样式：允许...
5. **其他表格操作**：除了上述基本功能，富文本编辑器可能还包括拆分单元格、调整行高、排序数据、设置边框样式和颜色等高级功能，以满足更复杂的需求。 在实际应用中，富文本编辑器的这些特性对于内容创作者来说...