|
|
今天用一種簡潔的方法toggleClass()實現了隔行換色:代碼如下：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>隔行換色</title><script src="js/jquery-1.4.2.min.js"></script><style type="text/css">body,table,td, {font-family:Arial, Helvetica, sans-serif;font-size:12px;}.h {background:#f3f3f3;color:#000;}.c {background:#ebebeb;color:#000;}</style></head><body><div id="aaa"><form><table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"><tr><td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>藍楓前端</td><td>藍楓前端</td></tr></table></form></div><script>第一種比較復雜的方法：
$(function(){$("#table tr").hover(function(){$(this).addClass("h");},function(){$(this).removeClass("h");})$("input").click(function(){if($(this).attr("checked")){$(this).closest("tr").addClass("c");}else{$(this).closest("tr").removeClass("c");}})})第二種比較簡單的方法：
toggleClass() 對設置或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果。
不過，通過使用 "switch" 參數，您能夠規定只刪除或只添加類。
$(function(){$("#table tr").hover(function(){$(this).toggleClass("h");})$("input").click(function(){var d = $(this);d.closest('tr').toggleClass("c",d.attr("checked")) ;})})</script></body></html> JavaScript技術：用簡潔的jQuery方法toggleClass實現隔行換色，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
