动态添加表格数据（jQuery、Vue）

最新推荐文章于 2024-05-22 11:10:05 发布

楚风岸影

最新推荐文章于 2024-05-22 11:10:05 发布

阅读量1.2k

点赞数 1

分类专栏：前端内容文章标签： jquery vue.js javascript html css

本文链接：https://blog.csdn.net/lcb9354/article/details/105016851

版权

前端内容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

动态添加表格数据（jQuery、Vue）

一、jQuery动态插入表格数据

二、Vue动态插入表格数据的简单操作

一、jQuery动态插入表格数据

1、效果图

在这里插入图片描述

2、参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0" id="tb2" align="center" style="text-align: center;">
			<caption>图书信息</caption>
			<thead>
				<tr>
					<th></th>
					<th>书籍名称</th>
					<th>作者</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>购买数量</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		</table>
		<script src="../../qz/js/jquery-3.4.1.min.js"></script>
		<script>
			var books = [{
				id: 1,
				author: '小明',
				name: '小明去哪了',
				date: '????-??-??',
				price: 32,
				count: 1
			}, {
				id: 2,
				author: '小白',
				name: '小白去哪了',
				date: '????-??-??',
				price: 22,
				count: 1
			}, {
				id: 3,
				author: '小黑',
				name: '小黑去哪了',
				date: '????-??-??',
				price: 52,
				count: 1
			}, {
				id: 4,
				author: '小丽',
				name: '小丽去哪了',
				date: '????-??-??',
				price: 66,
				count: 1
			}]
			//获取tr的个数
			var trLen = $("#tb2").find("tr").length;
			//数组的长度
			var bLen = books.length;
			while (true) {
				//判断是否要追加tr
				if (bLen + 1 - trLen != 0 && bLen + 1 - trLen > 0) {
					//tr个数+1
					trLen++;
					//追加tr个数bLen+1-trLen
					$("#tb2 tbody").append(
						"<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
					continue; //继续循环
				} else {
					break; //跳出循环
				}
			}
			//对象的遍历次数
			var count = 0
			//遍历数组books
			$.each(books, function(i) {
				//清空次数
				count = 0;
				//遍历对象books[i]  j为对象里面的属性
				$.each(books[i], function(j) {
					$("#tb2 tr:nth(" + (i + 1) + ") td:nth(" + count + ")").text(books[i][j])
					count++;
				})
				//为价格加上前后缀
				$("#tb2 tr:nth(" + (i + 1) + ") td:nth(4)").html("￥" + $("#tb2 tr:nth(" + (i + 1) + ") td:nth(4)").html() + ".00")
			});
		</script>
	</body>
</html>

二、Vue动态插入表格数据的简单操作

1、效果图

在这里插入图片描述

2、参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="tb">
			<table border="1" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
				<caption>图书信息</caption>
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>作者</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 遍历books数组 -->
					<tr v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.author}}</td>
						<td>{{item.date}}</td>
						<td>{{item.price | showPrice}}</td>
						<!-- :disabled="item.count<=1"==如果数目小于等于1，就不能再减少 -->
						<td><button @click="reduceCount(index)" :disabled="item.count<=1">-</button>{{item.count}}<button @click="addCount(index)">+</button></td>
						<td>
							<button @click="removeRow(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<h2>合计：{{totalPrice}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const tb = new Vue({
				el: '#tb',
				data: {
					books: [{
						id: 1,
						author: '小明',
						name: '小明去哪了',
						date: '????-??-??',
						price: 32,
						count: 1
					}, {
						id: 2,
						author: '小白',
						name: '小白去哪了',
						date: '????-??-??',
						price: 22,
						count: 1
					}, {
						id: 3,
						author: '小黑',
						name: '小黑去哪了',
						date: '????-??-??',
						price: 52,
						count: 1
					}, {
						id: 4,
						author: '小丽',
						name: '小丽去哪了',
						date: '????-??-??',
						price: 66,
						count: 1
					}]
				},
				methods: {
					addCount(index) {
						this.books[index].count++;
					},
					reduceCount(index) {
						this.books[index].count--;
					},
					//splice(index,1)函数中第一个参数index是要删除元素在数组中的位置，第二个参数是要删除的数量。
					removeRow(index) {
						this.books.splice(index, 1);
					}
				},
				computed: {
					//计算价格
					totalPrice() {
						let totalPrice = 0;
						for (let i = 0; i < this.books.length; i++) {
							totalPrice += this.books[i].count * this.books[i].price;
						}
						return totalPrice;
					}
				},
				filters: {
					showPrice(price) {
						//添加前后缀
						return "￥" + price.toFixed(2);
					}
				}
			})
		</script>
	</body>
</html>

楚风岸影

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
动态添加表格数据（jQuery、Vue）

动态添加表格数据（jQuery、Vue）一、jQuery动态插入表格数据二、Vue动态插入表格数据的简单操作一、jQuery动态插入表格数据1、效果图2、参考代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> &...
复制链接

扫一扫