纯JS/JQuery实现列表的动态新增、删除和修改+全选和取消全选操做

时间  2020-11-27
标签 html jquery git app ide this spa code orm htm 栏目 JavaScript 繁體版
原文   原文链接

最近学了JS和JQuery，而且写出了列表的动态增长和删除还有修改的操做，如今我就来分享给你们html

演示地址

点击的时候页面可能没效果,若是出现不能点击的话退出重进,再点一下下面的连接就行了。jquery

点击这里查看页面效果git

JS/JQuery代码

tr颜色

// 颜色
	$(".list tr:odd").addClass("odd");

全选/取消全选事件

// 多选框的点击操做
				// 默认样式
				$(".list th:first").append("<label for='check' id='show'>全选</label>");
				$("#check").click(function() { 
					if(this.checked) { 
						$("#show").replaceWith("<label for='check' id='show'>已全选</label>");
						$("tbody :checkbox").prop("checked", true);
					} else { 
						$("tbody :checkbox").prop("checked", false);
						$("#show").replaceWith("<label for='check' id='show'>已取消全选</label>");
					}

				});

列表HTML代码

<div class="list">
			<form>
				<table border="1" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th><input type="checkbox" id="check" name="check" /></th>
							<th>分类的ID</th>
							<th>分类的名称</th>
							<th>分类的描述</th>
							<th>操做</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox" /></td>
							<td>1</td>
							<td>第一行</td>
							<td>第一行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>2</td>
							<td>第二行</td>
							<td>第二行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>3</td>
							<td>第三行</td>
							<td>第三行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>4</td>
							<td>第四行</td>
							<td>第四行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>5</td>
							<td>第五行</td>
							<td>第五行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>

新增JQuery代码

// 点击新增时显示新增列表
				$("input:button:first").click(function() { 
					$("#addBox").slideDown(1000);
				});

				// 点取消新增时隐藏新增列表
				$("#addBox input:reset:last-child").click(function() { 
					$("#addBox").slideUp(1000);
				});

				// 增长 点击事件
				$("#addBox input:reset:first-child").click(function() { 
					$(".list tr:odd").removeClass("odd"); // 新增前去除颜色
					// 先复制一份tbody下的tr
					var trDom = $(".list tbody tr:first").clone(true);
					$(".list tbody").append(trDom); // 写入到tbody内

					// 将输入的内容写入到列表
					var textDom = $("#addBox input:text"); // 获取文本框
					var tdDom = $(".list tbody tr:last td");
					for(var i = 0; i < textDom.length; i++) { 
						var content = textDom.eq(i).val();
						if(content == ""){ 
							tdDom.parents("tr").remove();// 若是输入的有空值 删除刚才添加的内容
							$(".list tr:odd").addClass("odd"); // 添加颜色
							alert("请输入完整");
							return;// 提示输入完整并结束程序
						}
						tdDom.eq(i + 1).text(content);
					}

					$(".list tr:odd").addClass("odd"); // 新增后添加颜色
				});

新增HTML代码

<input type="button" value="新增" />
	<div id="addBox">
			<form>
				<table>
					<tr>
						<th colspan="2">新增列表</th>
					</tr>
					<tr>
						<td>分类的ID:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的名称:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的描述:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="reset" value="新增一个" />
							<input type="reset" value="取消新增" />
						</td>
					</tr>
				</table>
			</form>
		</div>

删除JQuery代码

// 删除操做
				$(".list tbody td a:last-child").click(function() { 
					var isDel = confirm("肯定真的要删除吗?");
					if(isDel) { 
						if($(".list tr").length > 2) { 
							$(".list tr:odd").removeClass("odd"); // 删除前去除颜色
							$(this).parents("tr").remove();
							$(".list tr:odd").addClass("odd"); // 删除后添加颜色
						} else { 
							alert("最少保留一条数据");
						}
					}
				});

修改JQuery代码

// 修改点击事件
				$(".list tbody td a:first-child").click(function() { 
					// 点击修改时显示修改列表
					$("#updBox").slideDown(1000);
					// 取消事件 --> 取消上一次修改的点击事件
					$("#updBox input:reset:first-child").off("click");
					var trDom = $(this).parents("tr");// 修改当前的tr
					update(trDom); // 绑定修改事件
				});
				
				// 点击取消修改以后也隐藏修改列表
				$("#updBox input:reset:last-child").click(function(){ 
					$("#updBox").slideUp(1000);
				});

修改调用的方法app

// 修改操做
			function update(trDom) { 
				$("#updBox input:reset:first-child").click(function() { 
					// 设置修改点击时间
					var textDom = $("#updBox input:text"); // 获取文本框
					for(var i = 0; i < textDom.length; i++) { 
						// 将文本框的内容替换到修改的地方-->trDom
						var content = textDom.eq(i).val();
						if(content == ""){ 
							alert("请输入完整");
							return; // 提示输入完整并结束程序
						}
						trDom.find("td").eq(i + 1).text(content);// 修改tr下的td内的内容
					}
					// 修改完毕以后隐藏修改列表
					$("#updBox").slideUp(1000);
				});
			}

修改HTML代码

<div id="updBox">
			<form>
				<table>
					<tr>
						<th colspan="2">修改列表</th>
					</tr>
					<tr>
						<td>分类的ID:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的名称:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的描述:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="reset" value="修改一个" />
							<input type="reset" value="取消修改" />
						</td>
					</tr>
				</table>
			</form>
		</div>

总体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
		<style>
			td,
			th { 
				width: 120px;
				text-align: center;
			}
			
			.odd { 
				background-color: lightsalmon;
			}
			
			#addBox { 
				display: none;
				width: 320px;
				float: left;
				background-color: lightslategrey;
			}
			
			#updBox { 
				display: none;
				width: 320px;
				float: left;
				background-color: lightslategrey;
			}
			#addBox table,#updBox table{ 
				margin: 0 auto;
			}
			#addBox th,#updBox th{ 
				color: red;
			}
		</style>
		<script>
			$(function() { 
				// 颜色
				$(".list tr:odd").addClass("odd");

				// 多选框的点击操做
				// 默认样式
				$(".list th:first").append("<label for='check' id='show'>全选</label>");
				$("#check").click(function() { 
					if(this.checked) { 
						$("#show").replaceWith("<label for='check' id='show'>已全选</label>");
						$("tbody :checkbox").prop("checked", true);
					} else { 
						$("tbody :checkbox").prop("checked", false);
						$("#show").replaceWith("<label for='check' id='show'>已取消全选</label>");
					}

				});

				// 点击新增时显示新增列表
				$("input:button:first").click(function() { 
					$("#addBox").slideDown(1000);
				});

				// 点取消新增时隐藏新增列表
				$("#addBox input:reset:last-child").click(function() { 
					$("#addBox").slideUp(1000);
				});

				// 增长 点击事件
				$("#addBox input:reset:first-child").click(function() { 
					$(".list tr:odd").removeClass("odd"); // 新增前去除颜色
					// 先复制一份tbody下的tr
					var trDom = $(".list tbody tr:first").clone(true);
					$(".list tbody").append(trDom); // 写入到tbody内

					// 将输入的内容写入到列表
					var textDom = $("#addBox input:text"); // 获取文本框
					var tdDom = $(".list tbody tr:last td");
					for(var i = 0; i < textDom.length; i++) { 
						var content = textDom.eq(i).val();
						if(content == ""){ 
							tdDom.parents("tr").remove();// 若是输入的有空值 删除刚才添加的内容
							$(".list tr:odd").addClass("odd"); // 添加颜色
							alert("请输入完整");
							return;// 提示输入完整并结束程序
						}
						tdDom.eq(i + 1).text(content);
					}

					$(".list tr:odd").addClass("odd"); // 新增后添加颜色
				});

				// 删除操做
				$(".list tbody td a:last-child").click(function() { 
					var isDel = confirm("肯定真的要删除吗?");
					if(isDel) { 
						if($(".list tr").length > 2) { 
							$(".list tr:odd").removeClass("odd"); // 删除前去除颜色
							$(this).parents("tr").remove();
							$(".list tr:odd").addClass("odd"); // 删除后添加颜色
						} else { 
							alert("最少保留一条数据");
						}
					}
				});

				// 修改点击事件
				$(".list tbody td a:first-child").click(function() { 
					// 点击修改时显示修改列表
					$("#updBox").slideDown(1000);
					// 取消事件 --> 取消上一次修改的点击事件
					$("#updBox input:reset:first-child").off("click");
					var trDom = $(this).parents("tr");// 修改当前的tr
					update(trDom); // 绑定修改事件
				});
				
				// 点击取消修改以后也隐藏修改列表
				$("#updBox input:reset:last-child").click(function(){ 
					$("#updBox").slideUp(1000);
				});
				
			});

			// 修改操做
			function update(trDom) { 
				$("#updBox input:reset:first-child").click(function() { 
					// 设置修改点击事件
					var textDom = $("#updBox input:text"); // 获取文本框
					for(var i = 0; i < textDom.length; i++) { 
						// 将文本框的内容替换到修改的地方-->trDom
						var content = textDom.eq(i).val();
						if(content == ""){ 
							alert("请输入完整");
							return; // 提示输入完整并结束程序
						}
						trDom.find("td").eq(i + 1).text(content);// 修改tr下的td内的内容
					}
					// 修改完毕以后隐藏修改列表
					$("#updBox").slideUp(1000);
				});
			}
		</script>
	</head>

	<body>
		<input type="button" value="新增" id="add" />
		<div class="list">
			<form>
				<table border="1" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th><input type="checkbox" id="check" name="check" /></th>
							<th>分类的ID</th>
							<th>分类的名称</th>
							<th>分类的描述</th>
							<th>操做</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox" /></td>
							<td>1</td>
							<td>第一行</td>
							<td>第一行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>2</td>
							<td>第二行</td>
							<td>第二行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>3</td>
							<td>第三行</td>
							<td>第三行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>4</td>
							<td>第四行</td>
							<td>第四行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>5</td>
							<td>第五行</td>
							<td>第五行</td>
							<td>
								<a href="#">修改</a>
								<a href="#">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<div id="addBox">
			<form>
				<table>
					<tr>
						<th colspan="2">新增列表</th>
					</tr>
					<tr>
						<td>分类的ID:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的名称:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的描述:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="reset" value="新增一个" />
							<input type="reset" value="取消新增" />
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div id="updBox">
			<form>
				<table>
					<tr>
						<th colspan="2">修改列表</th>
					</tr>
					<tr>
						<td>分类的ID:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的名称:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>分类的描述:</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="reset" value="修改一个" />
							<input type="reset" value="取消修改" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程