JQuery對表格進行操作的常用技巧總結_jquery

1、表格奇數行和偶數行分別添加樣式

複製代碼 代碼如下:

$ (function(){
$('tr:odd').addClass("odd");
$('tr:even').addClass("even");
});

不算表的頭部

複製程式碼 代碼如下:

代碼如下:

$(function(){
$('tbody>tr:odd').addClass("odd");
$('tbody>tr:even').addClass("even");

});

2、單選框控制行的高亮顯示複製代碼

程式碼如下:


$('tobdy>tr').click(function(){
$(this).addClass('selected')
.siblings() .removeClass('selected')
.end() // 重新傳回該物件
.find(':radio').attr('checked',true);

});

3、複選框控制行的高亮顯示複製程式碼

程式碼如下:



程式碼如下:



程式碼如下:

$('tobdy>tr').click(function(){
if( $(this).hasClass('selected') ){ // 判斷是否有selected高亮樣式
$(this).removeClass('selected')

.find(':checkbox').attr('checked',false); }else{ $(this).addClass('selected ') .find(':checkbox').attr('checked',true); } });

4、表格內容篩選




複製程式碼

程式碼如下: $(function(){ $('table tbody tr('table tbody tr ').hide() .filter(":contains(李)").show(); });