请问下面这个功能如何实现？谢谢！
表格的具体需求是：(1)表格分3栏：用户ID、用户姓名（假设是英文）、用户生日
(2)要求点击各栏标题，能够自动实现按该栏进行排序
(3)要求鼠标所处的行自动高亮
(4)表格的样式在外部样式表中定义
[此贴子已经被作者于2006-3-4 22:35:54编辑过]
(1)做个表格
(2)客户端可以用JS排序
(3)用JS
(4)用CSS样式表
2006-03-04 22:12
2006-03-05 12:04
做了一个用javascript排序表格，高亮显示简单些，自己做做
[CODE]
<html>
<head>
<style>
table{font-size:14px;}
th{background-color:skyblue;}
td{background-color:pink;}
</style>
</head>
<body style="font-size:14px">
表格排序设定：按第<input type="text" name="txtColSorted" size="5" value="1">列排序
升序<input type="checkbox" checked name="chkSortAsc">
<br>
<input type="button" value=" 排序表格 " onclick="sortTable('table1',3)">
<table width="100%" cellspacing=1 id="table1">
<tr align="left">
<th width="33%">标题1</th>
<th width="33%">标题2</th>
<th width="34%">标题3</th>
</tr>
<tr>
<td>10</td> <td>22</td> <td>30</td>
</tr>
<tr>
<td>5</td> <td>41</td> <td>566</td>
</tr>
<tr>
<td id="td1">50</td> <td>10</td> <td>36</td>
</tr>
</table>
<input type="button" value=" 排序表格 " onclick="sortTable('table2',3)">
<table width="100%" cellspacing=1 id="table2">
<tr align="left">
<th width="33%">标题1</th>
<th width="33%">标题2</th>
<th width="34%">标题3</th>
</tr>
<tr>
<td>110</td> <td>542</td> <td>380</td>
</tr>
<tr>
<td>525</td> <td>412</td> <td>66</td>
</tr>
<tr>
<td id="td1">150</td> <td>103</td> <td>136</td>
</tr>
</table>
<script>
function sortTable(tableID,colCount){
var colSorted=parseInt(txtColSorted.value);
var asc=chkSortAsc.checked;
sort(tableID,colCount,colSorted,asc);
}
function sort(tableID,colCount,colSorted,asc){
var tb=document.getElementById(tableID);
if(tb.length==0) return(false);
var a=tb.getElementsByTagName("td");
if(a.length==0) return(false);
var b=new Array(new Array(colCount));
var c=new Array(new Array(colCount));
var j=-1;
var row,col;
for(i=0;i<a.length;i++){
row=Math.floor(i/colCount);
col=i%colCount;
if(col==0){
b[row]=new Array(colCount);
c[row]=new Array(colCount);
}
b[row][col]=a[i];
c[row][col]=parseFloat(a[i].innerText);
}
sortNumber(b,c,colSorted,asc);
}
function sortNumber(b,c,colSorted,asc){
if(b.length==0) return(false);
if(b[0].length<colSorted || colSorted<1) return(false);
var tmp=0;
var col=0;
for(i=0;i<c.length;i++){
for(j=i+1;j<c.length;j++){
if((c[i][colSorted-1]>c[j][colSorted-1])&&asc){
for(col=0;col<c[i].length;col++){
tmp=c[i][col];
c[i][col]=c[j][col];
c[j][col]=tmp;
b[i][col].innerText=c[i][col];
b[j][col].innerText=c[j][col];
}
}
if((c[i][colSorted-1]<c[j][colSorted-1])&&(!asc)){
for(col=0;col<c[i].length;col++){
tmp=c[i][col];
c[i][col]=c[j][col];
c[j][col]=tmp;
b[i][col].innerText=c[i][col];
b[j][col].innerText=c[j][col];
}
}
}
}
}
</script>
</body>
</html>
[/CODE]
[此贴子已经被作者于2006-3-5 12:33:07编辑过]
2006-03-05 12:31