純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教程