Jquery中的表格换行颜色设置与复选框点击设置

2020-6-18
养生这个东西,不要等到身体出问题了,或者是上年纪了再去,而是年轻的时候就要开始保养,就像汽车一样
Jq完成表单隔行换色问题
思路:
1.建立一个表格 三行四列
2.头部设置为单独的用tread 内容部分用
3.在script中写代码 用层级选择器获取行数(偶数)或奇数
如果在样式中已经设置了css
可以直接添加某个行的类或者id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script> 
					//1.加载主页面
					$(function(){
     
						//2.获取taboy里面的行
						$("tbody>tr:even").css("background-color","red")//3.获取偶数行并且设置红色
						
							$("tbody>tr:odd").css("background-color","yellow")//4.获取奇数行并且设置黄色
					});
		
		</script>
	</head>
	<body>
		<table border="1px" width="500px" height="200px" align="center">
			<thead>
					<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td>电话</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>18</td>
					<td>13163399562</td>
				</tr>
				<tr>
					<td>李白</td>
					<td>18</td>
					<td>15236542254</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>56</td>
					<td>3132684</td>
				</tr>
				<tr>
					<td>赵六</td>
					<td>23</td>
					<td>57226333333</td>
				</tr>
			</tbody>
		</table>
		
	</body>
</html>

使用jq完成全选和取消全选框

首选定义一个表格
首尾分离
首部设置框
点击首部选中状态则设置尾部全部为选中状态
1.加载页面
2.获取复选框并且设置获取下面的所有复选框的状态设置为和复选框的状态一致(this.checked)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../js/jquery-1.8.3.min.js"> </script>
		<script>
		//1.加载页面
			$(function(){
     
		//2.获取复选框并且设置获取下面的所有复选框的状态设置为和复选框的状态一致
		$("#checkAll").click(function(){
     
			$(".checkOne").attr("checked",this.checked);	//注意为点击的状态一致  
		});
				
			});
		</script>
	</head>

	<body>
		<table border="1px" width="360px" height="150px" cellpadding="0px" cellspacing="0px" align="center">

			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox"  id="checkAll"/></th>
					<th>11</th>
					<th>12</th>
					<th>13</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>21</td>
					<td>22</td>
					<td>23</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>31</td>
					<td>32</td>
					<td>33</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>41</td>
					<td>42</td>
					<td>43</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>51</td>
					<td>52</td>
					<td>53</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>

练习:

Jquery中的表格换行颜色设置与复选框点击设置_第1张图片

你可能感兴趣的:(web前端,jquery)