jQuery之表常用操作

2021-05-27 12:14:56 字數 2720 閱讀 2939

就table的一些常用操作做了乙個綜合的例子,包括行條紋 高亮 工具條提示 擴充套件 摺疊 篩選等效果。

效果圖如下:

下面我把我寫的例子拆分解釋一下:

1.

行條紋

js**

var rowindex = 0;   

$("tbody tr").each(function(index)   

else   

else   

}   

rowindex++;    

)};  

這段**(rowindex%4 < 2)是兩行一組交替換色。

如果是三行一組交替換色,就是rowindex%6 < 3,...依次類推。

通常情況下我們用到最多的是隔行換色,比這個兩行一組交替換色要簡單。

jquery提供了方法:

:even : 匹配所有索引值為偶數的元素,從 0 開始計數。例如$("tr:even");

:odd:匹配所有索引值為奇數的元素,從 0 開始計數。例如$("tr:odd")。

或者用:nth-child(index):匹配其父元素下的第n個子或奇偶元素,從1開始計數。例如(":nth-child(2)"偶數行)

2.高亮(突出顯示行)

js**

var column = 3;   

$("table.striped tbody tr").each(function(index)   

else   

});   

})     

});   

這段**可以增強**的視覺效果,是基於使用者的互動突出顯示相關的行。

3.工具條提示

js**

var highlighted ="";   

//定位工具提示條

var positiontooltip = function(event));   

};   

//顯示工具提示條

var showtooltip = function(event)   

else   

//給工具提示條增加內容,

//如果當前tr的樣式是highlight,那麼工具條的內容是:click to un-highlight all topics written by $thistopic;

//如果當前tr的樣式不是highlight,那麼工具條的內容是:click to highlight all topics written by $thistopic.

positiontooltip(event);   

};   

//隱藏工具提示條

var hidetooltip = function();  

儘管行突出效果是一種很有用的特性,但就目前來講,這些特性存在與否對使用者而言並不明顯。儘管我們可以為所有要單擊的標籤新增clickable類,使滑鼠懸停在這些標籤上時,游標變成手的形狀。當使用者仍然無從知曉單擊這個標籤會發生什麼事情。為此,進一步新增與單擊會發生的情況有關的說明是必要的。

4.摺疊和擴充套件

js**

var togglemins = "images/iconopen.gif";   

var toggleplus = "images/iconclose.gif";   

var $subhead = $("tbody th:first-child");   

$subhead.prepend("

$("img",$subhead).addclass("clickable").click(function()   

else   

});  

這裡用了fadein(speed)和fadeout(speed)方法,speed(string,number) :三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

當**中以分組的方式包含大量的資料時,如果能都摺疊或者隱藏一部分**的內容,就可以減少頁面滾動,從而方便對**中的所有資料進行更清晰地檢視。

5.篩選(filter by topic列)

js**

$("table.striped").each(function();   

$table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function());   

//在樣式為filter-column的div加乙個all按鈕,顯示所有的**行     

$("all

").click(function(),function(event)   

else

if($("th",this).length == 0)   

});    

$(this).addclass("active").siblings().removeclass("active");                   

});   

$filters.insertbefore($table);//把樣式為filter-column的div插入到table前

}   

});           

通過只向使用者顯示匹配給定條件的**行,可以省去使用者不必要的分心。

jQuery之表常用操作

就table的一些常用操作做了乙個綜合的例子,包括行條紋 高亮 工具條提示 擴充套件 摺疊 篩選等效果。效果圖如下 下面我把我寫的例子拆分解釋一下 1.行條紋 js varrowindex 0 tbodytr each function index else else rowindex 這段 row...

jquery常用操作

操作下拉列表 新增選項列表 this get 0 options.add new option text,value 清空列表 this get 0 options.length 0 刪除指定索引的選項 this get 0 remove index 設定需要選中項的值 this get 0 val...

JQuery常用操作

遍歷option和新增 移除option function changeshipmethod shipping else 取得下拉列表的選取值 testselect option selected text 或 testselect find option selected text 或 tests...