HTML(HBuilder)作业题4- 隔行换色（jquery）

问：怎么实现鼠标移上去换色，而且奇偶数行颜色本身不同

答：$("tbody tr:even").addClass("  ")
       $("tbody tr:odd").addClass("  ")

目录

 1.css样式（style）

2.展示部分

3.jquery代码部分（script）

---

 1.css样式（style）

        <style>
			a{  text-decoration:none;
				color: green;
			}
			.even{background-color: #aaffff;
			}
			.odd{background-color: #ffff7f;
			}
			.headcss{background-color: #00aaff;
			}
			.hovercss{background-color: #ea8202;
			}
		</style>

2.展示部分

        <table border="1" align="center" cellspacing="0" cellpadding="6">
			<thead class="headcss">
				<tr>
					<th><font size="5">11111</font></th>
					<th><font size="5">22222</font></th>
					<th><font size="5">33333</font></th>
				</tr>
			</thead>
			<tbody align="center">
				<tr>
					<td>1-1</td>
					<td>2-1</td>
					<td>3-1</td>
				</tr>
				<tr>
					<td>1-2</td>
					<td>2-2</td>
					<td>3-2</td>
				</tr>	
				<tr>
					<td>1-3</td>
					<td>2-3</td>
					<td>3-3</td>
				</tr>
				<tr>
					<td>1-4</td>
					<td>2-4</td>
					<td>3-4</td>
				</tr>	
			</tbody>
		</table>

3.jquery代码部分（script）

        <script>
			$(document).ready(function(){
				$("tbody tr:even").addClass("even");
				$("tbody tr:odd").addClass("odd");
				$("tbody tr").hover(function(){
					$(this).addClass("hovercss").siblings().removeClass("hovercss");
				})
			}); 
		</script>

------------分割线---------------

菜鸟古古 2022-1-6 18:46:37