大哥200分全给你了 html+js做一个对表格内容的排序,按分数排序_百度知 ...
发布网友
发布时间：2022-04-28 20:24
共2个回答
热心网友
时间：2022-04-20 21:54
<head>
<title>表格排序示例</title>
</head>
<style>
table,tr,td{
border:1px solid black;
border-collapse:collapse;
}
td{
width:80px;
height:20px;
line-height:30px;
text-align:center;
}
</style>
<body>
<table id="myTable">
<thead>
<tr><td>姓名</td><td>分数</td></tr>
</thead>
<tbody>
<tr><td><input value="aa"/></td><td><input value="60"/></td></tr>
<tr><td><input value="bb"/></td><td><input value="67"/></td></tr>
<tr><td><input value="cc"/></td><td><input value="59"/></td></tr>
<tr><td><input value="dd"/></td><td><input value="70"/></td></tr>
<tr><td><input value="ee"/></td><td><input value="80"/></td></tr>
<tr><td><input value="ff"/></td><td><input value="90"/></td></tr>
<tr><td><input value="gg"/></td><td><input value="98"/></td></tr>
<tr><td><input value="hh"/></td><td><input value="93"/></td></tr>
<tr><td><input value="ii"/></td><td><input value="100"/></td></tr>
<tr><td><input value="jj"/></td><td><input value="50"/></td></tr>
<tr><td><input value="kk"/></td><td><input value="82"/></td></tr>
</tbody>
</table>
<button onclick="sortTable(true)">升序</button>
<button onclick="sortTable(false)">降序</button>
</body>
<script>
/**
返回一个二维数组，数组保存内容为表格除第一行以外的所有行下的文本框的值
二维数组形式如下：
[["aa",80],["bb",83].....];
*/
function getValues(){
var tab = document.getElementById("myTable");
var arr = new Array();
for(var i=1;i<tab.rows.length;i++){
var temp = new Array();
temp[0] = tab.rows[i].children[0].children[0].value;
temp[1] = parseInt(tab.rows[i].children[1].children[0].value);
arr[i-1] = temp;
}
return arr;
}
/**
将二维数组按每个元素的第二个元素大小升序排序，并返回此数组。
arr为二维数组，形如：
[["aa",80],["bb",83].....]；
*/
function sortArray(flag){
arr = getValues();
for(var i=1;i<arr.length;i++){
for(var j=0;j<i;j++){
if(flag){
if(arr[i][1]<arr[j][1]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}else{
if(arr[i][1]>arr[j][1]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
}
return arr;
}
/**
刷新表格
*/
function sortTable(flag){
var arr = sortArray(flag);
var tab = document.getElementById("myTable");
for(var i=0;i<arr.length;i++){
tab.rows[i+1].children[0].children[0].value = arr[i][0];
tab.rows[i+1].children[1].children[0].value = arr[i][1];
}
}
</script>
</html>来自：求助得到的回答
热心网友
时间：2022-04-20 23:12
