例子:

螞蟻部落

* {

margin: 0;

padding: 0;

}

body {

padding: 100px;

}

.select {

position: relative;

display: inline-block;

width: 200px;

height: 30px;

outline: none;

background: #f5fafe;

color: #555555;

font-size: 18px;

line-height: 30px;

border: 1px solid #cad9ea;

text-indent: 15px;

}

.select option {

text-indent: 15px;

}

.select option:hover {

background-color: #ff8800;

color: #fff;

}

table {

width: 100%;

font-size: 16px;

table-layout: fixed;

empty-cells: show;

border-collapse: collapse;

margin: 20px auto;

border: 1px solid #cad9ea;

color: #666;

}

th {

background: linear-gradient(#f3faff, #f5fafe);

height: 40px;

overflow: hidden;

}

td {

height: 30px;

text-align: center;

}

td, th {

border: 1px solid #cad9ea;

padding: 0 1em 0;

}

tr:nth-child(odd) {

background-color: #f5fafe;

}

nameagesexweight(kg)schoollookingjob

(function () {

var sortBy = function (list, attrName, order) {

console.log(attrName)

console.log(order)

return list

.slice()

.sort(function (left, right) {

var a = left[attrName];

var b = right[attrName];

if (a > b || a === void 0) return 1 * order;

if (a < b || b === void 0) return -1 * order;

return -1 * order;

});

};

var template = function (string, user) {

return string.replace('name', user.name)

.replace('age', user.age)

.replace('sex', user.sex)

.replace('weight', user.weight)

.replace('school', user.school)

.replace('looking', user.looking)

.replace('job', user.job);

};

var getSortedString = function (string, data, select) {

var str = '';

var order = parseInt($('#order').val(), 10);

if (select !== '-1') {

data = sortBy(data, select, order);

}

data.forEach(function (user) {

str += template(string, user);

});

return str;

};

window.getSortedString = getSortedString;

})();

$(function () {

var list = [{

name: 'div教程',

age: 25,

sex: '男',

weight: 60,

school: '螞蟻部落',

looking: '標準',

job: '前端工程師'

}, {

name: 'css教程',

age: 24,

sex: '女',

weight: 56,

school: '螞蟻部落',

looking: '上等',

job: '后臺'

}, {

name: 'ajax教程',

age: 27,

sex: '男',

weight: 80,

school: '',

looking: '中下',

job: '前端工程師'

}, {

name: 'js教程',

age: 22,

sex: '女',

weight: 54,

school: '青島科技大學',

looking: '美麗',

job: '前端工程師'

}, {

name: 'softwhy.com',

age: 20,

sex: '男',

weight: 70,

school: '青島大學',

looking: '中等',

job: '后臺開發'

}, {

name: 'css3教程',

age: 19,

sex: '女',

weight: 55,

school: '清華',

looking: '上等',

job: '美工'

}, {

name: 'json教程',

age: 28,

sex: '女',

weight: 65,

school: '海洋大學',

looking: '漂亮',

job: '美工'

}];

var fillData = function (select) {

var str = getSortedString(string, list, select);

console.log(str)

$('#table tr').not('.head').remove();

$('#table').append(str);

};

var string = $('#dataItem').html();

console.log(string)

$('#select').change(function () {

var select = $(this).val();

console.log(select)

fillData(select);

});

$("#order").change(function () {

$("#select").trigger("change");

});

fillData('-1');

});

請選擇排序方式

姓名

年齡

性別

體重

學校

相貌

職業

升序

降序

姓名年齡性別體重學校相貌職業

關鍵代碼

/**

*

* @param {ArrObj} list 當前的數組對象

* @param {string} attrName 需要排序的name 表格字段的key

* @param {int} order 升序還是降序 升序為1 降序為-1

*/

function tableSort(list,attrName,order){

return list

.slice()

.sort(function (left, right) {

var a = left[attrName];

var b = right[attrName];

if (a > b || a === void 0) return 1 * order;

if (a < b || b === void 0) return -1 * order;

return -1 * order;

});

}

總結

以上是生活随笔為你收集整理的html table表头升序 降序,jquery实现表格根据字段进行升序降序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。