jQuery是一個非常強大的JavaScript庫,它極大地簡化了JavaScript代碼的編寫和維護。jQuery的主要功能是DOM操作、事件處理、Ajax交互和動畫效果等。而在這些功能中,表格的處理是非常常見的,下面我們來了解一下如何使用jQuery操作表格。
//給表格中的互動列加上顏色變化效果 $('table tr').hover(function(){ $(this).find('td:eq(3)').css('background-color','#BCE2F2'); },function(){ $(this).find('td:eq(3)').css('background-color',''); });
以上代碼的作用是當鼠標在表格每一行上移動時,該行的第四個單元格會變成淺藍色,離開該行時則恢復原色。
//給表格中的數字列加上排序功能 function sortTable($table, col, reverse) { var $rows = $table.find('tbody>tr').toArray().sort(comparer(col, reverse)); $table.find('tbody').empty().append($rows); } function comparer(index, reverse) { return function(a, b) { var valA = parseInt($(a).find('td:eq(' + index + ')').text(), 10); var valB = parseInt($(b).find('td:eq(' + index + ')').text(), 10); if(isNaN(valA)) valA = 0; if(isNaN(valB)) valB = 0; return (valA< valB ? -1 : (valA >valB ? 1 : 0)) * (reverse ? -1 : 1); } } $('table thead>tr>th').click(function(){ var $table = $(this).closest('table'); var reverse = $(this).hasClass('asc') ? true : false; sortTable($table, $(this).index(), reverse); $(this).siblings('th').removeClass('asc').removeClass('desc'); $(this).toggleClass('asc', !reverse).toggleClass('desc', reverse); });
這段代碼實現了一個簡單的表格排序功能,當點擊表格頭部的列時,該列會按照數字大小進行排序,每次點擊會切換排序順序。
以上就是通過jQuery來對表格進行操作的兩個例子,當然jQuery的功能遠不止于此,可以根據實際需要來靈活地運用它的眾多功能。
下一篇jquery 解碼