Jquery操作table表格

最新推荐文章于 2021-06-20 01:52:44 发布

打锤子棒棒糖

最新推荐文章于 2021-06-20 01:52:44 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： JQuery

本文链接：https://blog.csdn.net/qq_33022911/article/details/83506214

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求1：点击新增是，在表第一行给出输入输入框输入信息

需求2：点击保存时，将输入输入框的值保存到表中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				width: 720px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<input type="button" name="" id="btnInsert" value="新增" /> &nbsp;
		<input type="button" name="" id="btnSave" value="保存" />
		<br />
		<table border="1px" cellspacing="0" cellpadding="0">
			<tr>
				<th hidden="hidden"></th>
				<th width="100">姓名</th>
				<th width="100">性别</th>
				<th width="100">年龄</th>
				<th width="200">学院</th>
				<th width="220">地址</th>
			</tr>
			<tbody id="tbody">
			</tbody>
		</table>
	</body>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function() {
			//0.0 数据源
			var list = [{
				Id: 1,
				Name: "张三",
				Sex: "男",
				Age: "21岁",
				College: "数学学院",
				Address: "广东省韶关市"
			}, {
				Id: 2,
				Name: "李四",
				Sex: "男",
				Age: "21岁",
				College: "数学学院",
				Address: "广东省韶关市"
			}];
			LoadList(list);

			//1.0 获取操作的元素
			var btnInsert = $("#btnInsert");
			var btnSave = $("#btnSave");
			//2.0 点击新增按钮,注册事件
			btnInsert.click(function() {
				var html = "<tr>";
				html += "<td hidden='hidden'>0</td>";
				html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
				html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
				html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
				html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
				html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
				html += "</tr>";
				$("#tbody tr:first").before(html);
			});

			//3.0 点击保存,注册事件
			btnSave.click(function() {
				var newArray = [];
				//3.1 获取tbody下的tr
				$("#tbody tr").each(function(index, item) {
					//3.2 获取第一个td的值
					var id = $(item).children("td").get(0).innerHTML;
					var tableData = new Object();
					if(id == 0) {
						id = Math.floor(Math.random() * 100);
						tableData.Id = id;
						var inputList = $(item).find("input");
						tableData.Name = inputList[0].value;
						tableData.Sex = inputList[1].value;
						tableData.Age = inputList[2].value;
						tableData.College = inputList[3].value;
						tableData.Address = inputList[4].value;
						newArray.push(tableData);
					} else {
						tableData["Id"] = id;
						tableData.Name = $(item).children("td").get(1).innerHTML;
						tableData.Sex = $(item).children("td").get(2).innerHTML;
						tableData.Age = $(item).children("td").get(3).innerHTML;
						tableData.College = $(item).children("td").get(4).innerHTML;
						tableData.Address = $(item).children("td").get(5).innerHTML;
						newArray.push(tableData);
					}
				});
				//4.0 清空tbody
				$("#tbody").html("");
				//5.0 绑定数据
				LoadList(newArray);
			});
		});

		function LoadList(list) {			
			//1.0 获取tbody对象
			var tbody = $("#tbody");
			var html = "";
			//2.0 遍历数据源
			list.forEach(function(e) {
				html += "<tr>";
				html += "<td hidden='hidden'>" + e["Id"] + "</td>"
				html += "<td>" + e["Name"] + "</td>"
				html += "<td>" + e["Sex"] + "</td>"
				html += "<td>" + e["Age"] + "</td>"
				html += "<td>" + e["College"] + "</td>"
				html += "<td>" + e["Address"] + "</td>"
				html += "</tr>";
			});
			//3.0 绑定到tbody中去;
			tbody.append(html);
		}
	</script>

</html>

视图界面：

新增一行王五并保存

打锤子棒棒糖

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery操作table表格

需求1：点击新增是，在表第一行给出输入输入框输入信息需求2：点击保存时，将输入输入框的值保存到表中&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/cs
复制链接

扫一扫