本文實(shí)例講述了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>cssrain - demo</title><SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.min.js"></SCRIPT><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function(){//demo1://-隔行,滑動(dòng),點(diǎn)擊 變色$('.cssraindemo1 tbody tr:even').addClass('odd');$('.cssraindemo1 tbody tr').hover( function() {$(this).addClass('highlight');}, function() {$(this).removeClass('highlight');});$('.cssraindemo1 tbody tr').click( function() {$(this).toggleClass('selected');});//demo2:$('.cssraindemo2 tbody tr:even').addClass('odd');$('.cssraindemo2 tbody tr').hover( function() {$(this).addClass('highlight');}, function() {$(this).removeClass('highlight');});// 如果復(fù)選框默認(rèn)情況下是選擇的，變色.$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');// 復(fù)選框$('.cssraindemo2 tbody tr').click( function() { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); $(this).find('input[type="checkbox"]').removeAttr('checked'); } else { $(this).addClass('selected'); $(this).find('input[type="checkbox"]').attr('checked','checked'); } });//demo3:$('.cssraindemo3 tbody tr:even').addClass('odd');$('.cssraindemo3 tbody tr').hover( function() {$(this).addClass('highlight');}, function() {$(this).removeClass('highlight');});// 如果單選框默認(rèn)情況下是選擇的，變色.$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');// 單選框$('.cssraindemo3 tbody tr').click( function() { $(this).siblings().removeClass('selected'); $(this).addClass('selected'); $(this).find('input[type="radio"]').attr('checked','checked'); });});//--></SCRIPT><style type="text/css">h1 { font:bold 20px/26px Arial;}table { border:0;border-collapse:collapse;}td { font:normal 12px/17px Arial;padding:2px;width:100px;}th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}tr.odd { background:#FFF3BF;}tr.highlight { background:#6F4DFF;}tr.selected { background:#aaaaaa;color:#fff;}</style><!-- demo1 --><h1>Demo1--隔行,滑動(dòng),點(diǎn)擊 變色.</h1><table class="cssraindemo1"><thead><tr><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr> <td>張山</td><td>男</td><td>浙江寧波</td></tr><tr><td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr><tr><td>找六</td><td>男</td><td>浙江溫州</td></tr><tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table><!-- demo2 --><h1>Demo2--隔行,滑動(dòng),點(diǎn)擊 變色.+ 多選框選中的行 變色.</h1><table class="cssraindemo2"><thead><tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr><td><input type="checkbox" name="tablechoice1" value="" /></td> <td>張山</td><td>男</td><td>浙江寧波</td></tr><tr><td><input type="checkbox" name="tablechoice1" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="tablechoice1" value="" checked/></td> <td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr><tr><td><input type="checkbox" name="tablechoice1" value="" /></td> <td>找六</td><td>男</td><td>浙江溫州</td></tr><tr><td><input type="checkbox" name="tablechoice1" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="tablechoice2" value="" checked/></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table><!-- demo3 --><h1>Demo3--隔行,滑動(dòng),點(diǎn)擊 變色.+ 單選框選中的行 變色.</h1><table class="cssraindemo3"><thead><tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr><td><input type="radio" name="tablechoice" value=""/></td> <td>張山</td><td>男</td><td>浙江寧波</td></tr><tr><td><input type="radio" name="tablechoice" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td><input type="radio" name="tablechoice" value="" checked /></td> <td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr><tr><td><input type="radio" name="tablechoice" value="" /></td> <td>找六</td><td>男</td><td>浙江溫州</td></tr><tr><td><input type="radio" name="tablechoice" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td><input type="radio" name="tablechoice" value="" /></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table>更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
