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

最近学了JS和JQuery,并且写出了列表的动态增加和删除还有修改的操作,现在我就来分享给大家

演示地址

点击的时候页面可能没效果,如果出现不能点击的话退出重进,再点一下下面的链接就好了。

点击这里查看页面效果

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);
				});

修改调用的方法

// 修改操作
			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>
匿名

发表评论

匿名网友