js点击变色动画默认隐藏点击显示

最新推荐文章于 2022-05-29 17:01:48 发布

￥程序小菜鸟￥

最新推荐文章于 2022-05-29 17:01:48 发布

阅读量451

点赞数

分类专栏： script 文章标签：隐藏显示点击变色

本文链接：https://blog.csdn.net/qq_43413640/article/details/83063397

版权

script 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先上效果图
html

<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--删除按钮的背景色-->
	<style type="text/css">
		.del{
			background-color: greenyellow;
		}
	</style>
	<script type="text/javascript" src="js/jquery-2.1.0.js">
		
	</script>
	<body>
		<input type="button" value="全选" class="qx"/>
		<input type="button" value="批量删除" class="plsc"/>
		<input type="button" value="添加" class="add"/>
		<table border="1" class="table1">
			<tr>
				<td>
					<input type="checkbox" class="ck" />
				</td>
				<td>
				<p>张三	女</p>
				<p>生日：1997-3-1</p>
				<p>所在城市：上海</p>
				</td>
				<td>
					<input type="button" value="删除" class="del" />
				</td>
			</tr>
		</table>
		<table border="1" class="table2">
				<tr>
					<td>姓名：<input type="text" class="name"></td>
				</tr>
				<tr>
					<td>
					性别：<select class="sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
					</td>
				</tr>
				<tr>
					<td>生日：<input type="date" class="datea"></td>
				</tr>
				<tr>
					<td>
						所在城市：
						<select class="zhuz">
							<option value="上海">上海</option>
							<option value="北京">北京</option>
							<option value="深圳">深圳</option>
							<option value="香港">香港</option>
						</select>
					</td>
				</tr>
				<tr>
	 				<td align="center"><input type="button" value="确认提交" class="addd"></td>
				</tr>
		</table>
	</body>

script

<script type="text/javascript">
		//添加
		$(".addd").click(function(){	
			var name = $(".name").val();
			var sex = $(".sex").val();
			var datea = $(".datea").val();
			var zhuz = $(".zhuz").val();
			$(".table1").append(`<tr>
				<td>
					<input type="checkbox" class="ck" />
				</td>
				<td>
				<p>${name}	${sex}</p>
				<p>生日：${datea}</p>
				<p>所在城市：${zhuz}</p>
				</td>
				<td>
					<input type="button" value="删除" class="del" />
				</td>
			</tr>`);
			//添加结束自动隐藏
			$(".table2").hide();
			//新添加的数据写在外部的方法找不到  所以删除方法写在内部
			$(".del").click(function(){
				$(this).parent().parent().remove();
			});
			
		});
		//批量删除
		$(".plsc").click(function(){
			var id=$(".ck:checked");
			if(id.length>0){
				id.each(function(){
					$(this).parent().parent().remove();
				})
			}else{
				alert("请选择数据");
			}
		});
		//全选
		$(".qx").click(function(){
			var qx=$(".ck");
			qx.each(function(){
				this.checked=!this.checked;
			})
		});
		//单个删除
		$(".del").click(function(){
			$(this).parent().parent().remove();
		});
		//隐藏添加列表
		$(".table2").hide();
		//当点击添加按钮时显示添加列表
		$(".add").click(function(){
			$(".table2").show();
		});
		$(".addd").click(function(){
			if (this.style.background=='') {
                this.style.background='greenyellow'
            }else{
                this.style.background=''
            }
		});
		
	</script>

￥程序小菜鸟￥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js点击变色动画默认隐藏点击显示

先上效果图html&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;!--删除按钮的背景色--&gt; &lt;style type="text/css"&gt; .del{ background
复制链接

扫一扫