请教各位高手，如何用javascript让表格自动排序

把tr所有的tr放到数字里数组有个sort方法里面穿两个参数分别是指要比较的那两个tr
arr.sort(function(a,b){})
获取a b对应的td值后比较
不过按孩子字母排序的方法得自己写

@zzgzzg00 你可以给我一个例子吗，这样方便我理解

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<ul id="ul">
<li>小王<em>74</em></li>
<li>小李<em>65</em></li>
<li>小张<em>56</em></li>
<li>小周<em>84</em></li>
<li>小艾<em>63</em></li>
</ul>
<button id="test">排序</button>
<script>
function $(o){return document.getElementById(o)}
function makeArray( obj ){
var arr = [];
for ( var i = 0, len = obj.length; i < len; i++ ){
arr.push(obj[i]);
}
return arr;
}
function asc( x, y ){
return parseInt( x.innerHTML ) - parseInt( y.innerHTML );
} function makeOrder( wrapper, obj, order ){
var order = order || 'asc';
var wrapper = $( wrapper );
var obj = wrapper.getElementsByTagName( obj );
var arr;
arr = makeArray( obj );
if ( order == 'asc' ){
arr.sort( asc );
} else {
arr.sort( asc ).reverse();
}
for( var i = 0, len = arr.length; i < len; i++ ){
wrapper.appendChild( arr[i].parentNode )
}
}
$('test').onclick = function(){
makeOrder( 'ul', 'em', 'asc' );
}

</script>
</body>
</html>
参考下方法

谢谢3楼了。不过可惜我现在刚学做网页，你这个code有很多都看不懂。我在想有没有就是用sort的方法来弄顺序，而且可以简单点的。不过还是谢谢了，我会好好研究下你这个当做学新知识的。

轻轻的写了下
<!DOCTYPE HTML>
<html>
<head>
<title>exercice 8: un table en javascript</title>
<meta charset="UTF-8" />
<style>
#MonTableau th {
width: 200px;
height: 50px;
}#MonTableau td {
height: 35px;
}#MonTableau {
background: #F2F2F2;
}#MonTableau input {
border-style: solid;
border-width: 1px;
border-color: #000000;
width: 100px;
margin: 0 40px;;
}a {
transition: 0.5s;
transition-delay: 0.25s;
color: blue;
}a:hover {
font-size: 1.2em;
transition: 0.5s;
}#cote {
position: fixed;
top: 30%;
left: -182px;
transition: 1s;
transition-delay: 0.5s;
opacity: 0.7;
}#cote:hover {
transform: translateX(180px);
transition: 1s;
opacity: 1;
}#cote1 {
float: left;
border-style: ridge;
border-width: thin;
width: 180px;
background: #F2F2F2;
}#cote1 h1 {
border-bottom-style: ridge;
border-width: thin;
}#cote1 p {
text-align: center;
}#cote1 img {
width: 25%;
}#cote1 img:hover {
width: 150%;
z-index: 1;
transform: translateY(-250px);
transition: 2.5s;
}#cote2 {
float: left;
width: 30px;
text-align: center;
background: #FB8200;
position: relative;
top: 50px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 4px 10px 000;
transition: 4s;
}#cote:hover #cote2 {
box-shadow: none;
transition: 1s;
}#cote2 h3 {
margin: 0;
font-size: 1.2em;
}
</style>
<script>
var nom_map=[];
var nom_items={};
var init_data='';
function addNomMap(k){
if(nom_map[k] == null){
nom_map.push(k);
}
return k;
}
function addNomItems(k,v){
if(nom_items[k] == null){
nom_items[k] = v;
}
return v;
}
function dellNomMap(k){
var m = nom_map;
var clone = [];
for(var i=0;i<m.length;i++){
if(m[i] != k){
clone.push(m[i]);
}
}
nom_map = clone;

}
function dellNomItems(k){
delete nom_items[k];

}

function ordre(){
if(nom_map.length>0){
nom_map.sort();
refreshTable();
}
}
function refreshTable(){
var map = nom_map;
var len = map.length;
var items= nom_items;
var data='';
for(var i=0;i<len;i++){
data +='<tr>' + nom_items[map[i]] + '</tr>';
}
var x = document.getElementById("tbody");
x.innerHTML = init_data + data;
}
function initTbodyTr(x){
if(init_data == ''){
init_data = x.innerHTML;
}
}

function ajouter() {
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var parcours = document.getElementById("parcours").value;
var x = document.getElementById("tbody");
initTbodyTr(x);
var tableau = document.getElementById("MonTableau");
var l = tableau.rows.length;
var chivre = l - 1;
addNomMap(nom);
var v = '<td>'
+ nom
+ '</td> <td>'
+ prenom
+ '</td> <td>'
+ parcours
+ '</td><td><button onclick="supprimer2(this.parentNode.parentNode.rowIndex)">supprimer</button></td>';
addNomItems(nom,v);
x.innerHTML += '<tr>'+ v +'</tr>';
chivre++;
}
function supprimer() {
var tableau = document.getElementById("MonTableau");
l = tableau.rows.length;
x = l - 1;
if (x >= 2) {
var k = tableau.rows[x].cells[0].innerHTML;
dellNomMap(k);
dellNomItems(k);
tableau.deleteRow(x);
}
}
function supprimer2(txt) {
alert('not allow');
//var tableau = document.getElementById("MonTableau");
//tableau.deleteRow(txt);
}
</script>
</head>
<body>
<div align="center">
<h1>un tableau dynamique en JS</h1>
<table border="1" id="MonTableau">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Parcours</th>
<th style="width: 100px"></th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="text" id="nom" /></td>
<td><input type="text" id="prenom" /></td>
<td><select id="parcours"><option>WEB</option>
<option>EE</option></select></td>
<td style="width: 100px"></td>
</tr> </tbody>
</table>
<br />
<br />
<button onclick="ajouter()">valider</button>
<button onclick="supprimer()">supprimer la derniere ligne</button>
<button onclick="ordre()">par ordre</button>
</div>
<div id="cote">
<div id="cote1">
<h1>Menu</h1>
<ul>
<li><a href="index.html">L'accueil</a></li>
</ul>
<ul>
<li><a href="exercices.html">Les exercices</a></li>
</ul>
<ul>
<li><a href="http://senlis.craym.eu/" target="_blank">Page
de Senlis</a></li>
</ul>
<ul>
<li><a href="film.html" target="_blank">film:Orphan</a></li>
</ul>
<p>
<a href="film.html" target="_blank"></a>
</p>
</div>
<div id="cote2">
<h3>M</h3>
<h3>e</h3>
<h3>n</h3>
<h3>u</h3>
</div>
</div>
</body>
</html>

调试易

请教各位高手，如何用javascript让表格自动排序

解决方案 »