Sunday, August 23, 2009

How to hide/show Table Rows with jQuery

With jQuery, hiding and showing DOM elements are easy. But, one thing that I find a little bit challenging is hiding table row(s). Hiding and showing DIVs are easy:

function togglePanel(id) {
var viewContainer = $(id);

Or you can use show() and hide() or fadeIn() and fadeOut(). With our corresponding HTML:
<a href="javascript:togglePanel('#myDiv')">Toggle</a>
<div id="myDiv">Hello World</div>

Now what if we are using TABLE instead of DIV??

Easy - Use TBODY tag. Here is an example using TABLE:
<table id=anothersortable>
<tbody id=row01 class=content>
<tbody id=row02 class=content>
<a href="javascript:togglePanelMore('#row01', '#togglerow01')"      id="togglerow01">less</a> for row01

Then our jQuery to be as such:
function togglePanelMore(id, source) {
var viewContainer = $(id);

if ($(source).html() == "more") {
else {

IE 7 Quirks
In IE 8, you can refer to the TR directly without TBODY, like this:
<table id=anothersortable>
<tr id=row01><td>one</td></tr>
<tr id=row01><td>two</td></tr>
<a href="javascript:togglePanelMore('#row01', '#togglerow01')"
id="togglerow01">less</a> for row01
But for some reason, it is not reliably working in IE7.

Also, in IE7, putting speed inside the hide()/show() into becoming like hide('slow') won't work.

Here is a small demo.


Anonymous said...

Doesn't work. ".hide()" object doesn't support this method...

Joe said...

Can you be more specifi on what did not work for you? Here is a small demo -

Anonymous said...

Thank you for posting this. Very useful!

Bird said...

How do I control use dropdown menu instead?

Johannes Setiabudi said...

@Bird I am not sure what you meant - can you elaborate your question a little bit?

橡教官 said...

性功能障礙所致這是發生陽萎原因主要之一,約占陽萎總數威而鋼 犀利士哪裡買 壯陽藥品 壯陽藥 威而鋼哪裡買 犀利士專賣 威而鋼 威而鋼哪裡買 威而鋼專賣店 威而鋼藥局 情色貼圖的百分之九十左右,由性功能障礙引起的陽萎主要表現在:  1.精神因素所致。男子在情緒不佳,如悲痛、憂愁、恐懼、焦慮、抑郁或過度緊張時,大腦皮層的功能失調,造成性功能失調,引起陽萎。另外,缺乏性知識,對性生活缺乏正確認識,或受某種刺激,都會影響性功能,犀利士 犀利士 犀利士 犀利士 犀利士 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 威而鋼 犀利士 壯陽藥品去哪買 犀利士 犀利士 犀利士 犀利士 犀利士 威而鋼 犀利士以致引起陽萎。
  4.長期酗酒、吸煙或經常服用鎮靜藥,使大腦皮壯陽藥 威而鋼 壯陽藥 犀利士 犀利士 犀利士專賣 犀利士哪裡買 犀利士5mg價格 壯陽藥品 犀利士專賣 威而鋼 壯陽藥 威而鋼專賣店 犀利士哪裡買層處于抑制狀態,導致性功能減弱,從而出現陽萎。
  吃壯陽菜應審“時”度“勢”:所謂度勢,即必須根據自身具體情況而定。個人由于年齡、體質等方面的差異,在食療進補時也會出現不同。壯陽藥 壯陽藥品 犀利士 威而鋼 威而鋼哪裡買 犀利士 犀利士 壯陽藥品 壯陽藥比如,年紀大的人不宜過補,燥熱體質的人不宜在夏季食用過多食補物品。如果是對某些食物有過敏性反應的就更應該注意了。