close
$("tr:even"); //所有tr為偶數標籤
$("tr:odd"); //所有tr為奇數標籤
$("tr:first") ; //第一個tr的內容
$("tr:last") ; //最後一個tr的內容
$("tr:not(:first)"); //除了第一個tr以外的所有tr
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('tr:first').addClass('css1');
});
$('#btn2').click(function(){
$('td:first').addClass('css1');
});
$('#btn3').click(function(){
$('tr:last').addClass('css2');
});
$('#btn4').click(function(){
$('td:last').addClass('css2');
});
$('#btn5').click(function(){
$('tr:not(:first)').addClass('css1');
});
$('#btn6').click(function(){
$('tr').removeClass();
$('td').removeClass();
});
$('#btn7').click(function(){
$('tr:odd').addClass('css1');
});
$('#btn8').click(function(){
$('tr:even').addClass('css1');
});
})
</script>
<style type="text/css">
.css1{background-Color:blue;}
.css2{background-Color:yellow;}
</style>
</head>
<body>
<input type="Button" id="btn7" name="btn7" value="測試 odd" /><br />
<input type="Button" id="btn8" name="btn8" value="測試 even" /><br />
<br />
<input type="Button" id="btn1" name="btn1" value="測試 First Tr" /><br />
<input type="Button" id="btn2" name="btn2" value="測試 First Td" /><br />
<input type="Button" id="btn3" name="btn3" value="測試 Last Tr" /><br />
<input type="Button" id="btn4" name="btn4" value="測試 Last Td" /><br />
<input type="Button" id="btn5" name="btn5" value="測試 Not First Tr" /><br />
<br />
<input type="Button" id="btn6" name="btn6" value="還原預設值" /><br />
<hr />
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
</body>
</html>
文章標籤
全站熱搜
留言列表
網站 & 部落格 (2)