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