jQuery之表常用操作

2021-08-26 03:21:35 字數 2556 閱讀 2244

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

效果圖如下:

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

1.

行條紋

js**

varrowindex=0;

$("tbodytr").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**

varcolumn=3;

$("table.stripedtbodytr").each(function(index)

else

});

}) });

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

3.工具條提示

js**

varhighlighted="";

//定位工具提示條

varpositiontooltip=function(event));

}; //顯示工具提示條

varshowtooltip=function(event)

else

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

//如果當前tr的樣式是highlight,那麼工具條的內容是:clicktoun-highlightalltopicswrittenby$thistopic;

//如果當前tr的樣式不是highlight,那麼工具條的內容是:clicktohighlightalltopicswrittenby$thistopic.

positiontooltip(event);

}; //隱藏工具提示條

varhidetooltip=function();

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

4.摺疊和擴充套件

js**

vartogglemins="images/iconopen.gif";

vartoggleplus="images/iconclose.gif";

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

$subhead.prepend("+togglemins+"'alt='collapsethissection'/>");

$("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("tbodytrtd").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 var rowindex 0 tbody tr each function index else else rowindex 這段 r...

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...