jQuery--操作表格(table).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑動,點擊 變色
$('.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');}
);
// 如果複選框默認情況下是選擇的，變色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 複選框
$('.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');}
);
// 如果單選框默認情況下是選擇的，變色.
$('.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--隔行,滑動,點擊 變色.</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>湖南長沙</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--隔行,滑動,點擊 變色.+ 多選框選中的行 變色.</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>湖南長沙</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--隔行,滑動,點擊 變色.+ 單選框選中的行 變色.</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>湖南長沙</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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
標籤點擊事件後的操作
其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>