HTML数组显示+删除+修改+增加

最新推荐文章于 2024-01-01 00:16:50 发布

原创最新推荐文章于 2024-01-01 00:16:50 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

这篇博客详细介绍了如何在HTML中进行数组的操作，包括如何显示数组内容，如何删除数组元素，如何修改数组中的数据，以及如何向数组中增加新元素。通过实例代码解析，帮助读者掌握这些基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/anglarjs.min.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			var z_app = angular.module("APP", []);
			z_app.controller("dex", ["$scope", function($scope) {

				$scope.users = [{
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}, {
					name: "adw",
					age: 15
				}];

				$scope.remove = function(a) {
					$scope.users.splice(a, 1);
				}
				$scope.add = function() {
					var aname = $scope.uname;
					var age = $scope.uage;
					if(aname == ""||aname==undefined) {
						$("#uu_name").text("不能为空");
						$("#uu_name").css("color", "red");
						return;
					} else {
						$("#uu_name").text("");

					}
					$scope.users.push({
						name: aname,
						age: age
					});
					$scope.toadd = false;
				}

			}])
		</script>
		<style>
			div {
				width: 300px;
				background-color: darkgrey;
			}
		</style>
	</head>

	<body ng-app="APP" ng-controller="dex">
		<table width="400px" border="1px">
			<tr ng-repeat="u in users" ng-init="xianshi=true">
				<td width="100px"> <span  ng-show="xianshi"  >{{u.name}}</span>
					<input  type="text" ng-model="u.name" ng-show="!xianshi" />
					
				</td>
				<td width="100px">{{u.age}}</td>
				<td width="100px"> <input type="button" value="删除 " ng-click="remove($index)" /> ||
					<input type="button" value="修改" ng-click="xianshi=false" ng-show="xianshi"/>
					<input type="button" value="保存" ng-click="xianshi=true" ng-show="!xianshi"  />

				</td>
			</tr>
		</table>
		<input type="button" value="添加" ng-click="toadd=true" />

		<form ng-show="toadd">
			姓名：<input type="text" ng-model="uname" />
			<span id="uu_name"></span>
			<br /> 年龄：
			<input type="text" ng-model="uage" /><br />
			<input type="button" value="queding" ng-click="add()" />
		</form>

	</body>

</html>