HTML代码
<table>
<thead>
<tr><th>id</th><th>price</th><th>sales</th></tr>
</thead>
<tbody id="jsList">
<tr><td>1</td><td>22.0</td><td>800</td></tr>
<tr><td>2</td><td>30.0</td><td>600</td></tr>
<tr><td>3</td><td>20.5</td><td>700</td></tr>
<tr><td>4</td><td>40.5</td><td>500</td></tr>
<tr><td>5</td><td>60.5</td><td>300</td></tr>
<tr><td>6</td><td>50.0</td><td>400</td></tr>
<tr><td>7</td><td>70.0</td><td>200</td></tr>
<tr><td>8</td><td>80.5</td><td>100</td></tr>
</tbody>
</table>
CSS代码
<style type="text/css">
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
JS代码
<script type="text/javascript">
function sort(type, order) {
var list = document.getElementById('jsList');
var trs = list.getElementsByTagName('tr');
var col;
switch(type) {
case 'id':
col = 0;
break;
case 'price':
col = 1;
break;
case 'sales':
col = 2;
break;
}
trs = Array.prototype.slice.call(trs,0);//转换为数组形式
//console.log(trs);
trs.sort(function(val1,val2) {
var v1 = parseFloat(val1.getElementsByTagName('td')[col].innerText);
var v2 = parseFloat(val2.getElementsByTagName('td')[col].innerText);
if(order === 'asc') {
return v1 - v2; //升序
}else {
return v2 - v1; //降序
}
})
//添加到table
trs.forEach(function(item) {
list.appendChild(item);
})
}
</script>