jQuery练习二：会员信息模块

最新推荐文章于 2022-07-07 01:33:56 发布

选择跳水或自由落体

最新推荐文章于 2022-07-07 01:33:56 发布

阅读量1.2k

点赞数 3

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

本文链接：https://blog.csdn.net/qq_42244911/article/details/115057858

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一.需求

在这里插入图片描述

二.实现思路

1.table +css+背景图实现表格。
2.点击按钮，生成新的tr节点并追加到table中。
3.点击删除图标，将所在的tr节点元素从table中移除。

三.代码实现

1.实现表格

<table cellpadding="10" class="table">
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>卡号</th>
		<th>会员级别</th>
		<th>电话号码</th>
		<th>出生年月</th>
		<th>消费金额</th>
		<th style="width: 80px;" " colspan=" 2">操作</th>
	</tr>
	<tr class="info">
		<td>张三</td>
		<td>男</td>
		<td>62018549552731</td>
		<td>高级</td>
		<td>18486145748</td>
		<td>2020-01-02</td>
		<td>8,000,000</td>
		<td></td>
		<td class="delete"></td>
	</tr>
</table>
<button type="button" class="addbtn">Add</button>

为了复习下css随手写了一个，嫌麻烦的可以直接用UI组件

<style>
		table {
			width: 820px;
			margin: 10px;
		}
	
		table tr td {
			text-align: center;
		}
	
		table tr th {
			background-color: grey;
		}
	
		tr td:nth-child(8) {
			background-image: url(1.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 30px 30px
		}
	
		tr td:nth-child(9) {
			background: url(2..png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 30px 30px
		}
		.addbtn{
			width: 80px;height: 38px;color: #fff;background-color: #f00;
			border: none;
		}
	</style>

2.点击按钮新增会员信息

<script>

			//实现点击按钮添加tr节点
			$("button.addbtn").on("click", function() {
				i += 1;
				let sex =  infomation("男","女");
				let infoclass = infomation("初级","中级");
				// console.log(num)
				
				$(".table").append(
					`<tr class="info">class="info"
				<td>张三${i}</td>
				<td>${sex}</td>
				<td>62018549552731</td>
				<td>${infoclass}</td>
				<td>18486145748</td>
				<td>2020-01-02</td>
				<td>8,000,000</td>
				<td></td>
				<td class="delete"></td>
			</tr>`
				)

		</script>

3.删除会员信息

这里通过this指向所在的信息行，然后通过closrst()方法来获取父元素

//点击x删除当前的tr节点
$("td.delete").on("click", function() {
		// var $parent =  this.parent()
		// console.log(this.parents('.info'))//报错
		console.log(this.closest('.info'))
		this.closest('.info').remove()
	})
})

4.数据处理

			var i = 1;
			var sex = ""
			//封装一个函数通过获取随机数得到一个随机字符串
			function infomation(res1,res2){
				var num = parseInt(Math.random() * 2 + 1) //生成一个（0，3）之间的随机整数
				if (num == 1) {
					result = res1;
				} else if (num == 2) {
					result = res2;
				}
				return result;
			}

四.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员信息模块</title>
		<script src="jquery-3.4.1.min.js"></script>
		<style>
			table {
				width: 820px;
				margin: 10px;
			}
		
			table tr td {
				text-align: center;
			}
		
			table tr th {
				background-color: grey;
			}
		
			tr td:nth-child(8) {
				background-image: url(1.png);
				background-position: center;/*背景图居中显示*/
				background-repeat: no-repeat;/*不平铺*/
				background-size: 30px 30px/*设置背景图大小*/
			}
		
			tr td:nth-child(9) {
				background: url(2..png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 30px 30px
			}
			.addbtn{
				width: 80px;height: 38px;color: #fff;background-color: #f00;
				border: none;
			}
		</style>
	</head>
	<body>
		<table cellpadding="10" class="table">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>卡号</th>
				<th>会员级别</th>
				<th>电话号码</th>
				<th>出生年月</th>
				<th>消费金额</th>
				<th style="width: 80px;" " colspan=" 2">操作</th>
			</tr>
			<tr class="info">
				<td>张三</td>
				<td>男</td>
				<td>62018549552731</td>
				<td>高级</td>
				<td>18486145748</td>
				<td>2020-01-02</td>
				<td>8,000,000</td>
				<td></td>
				<td class="delete"></td>
			</tr>
		</table>
		<button type="button" class="addbtn">Add</button>
		<script>
			"use strict"
			var i = 1;
			var sex = ""
			//封装一个函数通过获取随机数得到一个随机字符串
			function infomation(res1, res2) {
				var num = parseInt(Math.random() * 2 + 1) //生成一个（0，3）之间的随机整数
				let result = ""
				if (num == 1) {
					result = res1;
				} else if (num == 2) {
					result = res2;
				}
				return result;
			}


			$(function() {
				$("button.addbtn").on("click", function() {
					i += 1;
					let sex = infomation("男", "女");
					let infoclass = infomation("初级", "中级");
					// console.log(num)
					//实现点击按钮添加tr节点
					$(".table").append(
						`<tr class="info">
							<td>张三${i}</td>
							<td>${sex}</td>
							<td>62018549552731</td>
							<td>${infoclass}</td>
							<td>18486145748</td>
							<td>2020-01-02</td>
							<td>8,000,000</td>
							<td></td>
							<td class="delete"></td>
						</tr>`
					)
					//点击x删除当前的tr节点
					$("td.delete").on("click", function() {
						// var $parent =  this.parent()
						// console.log(this.parents('.info'))//报错
						console.log(this.closest('.info'))
						this.closest('.info').remove()
					})
				})
			})
		</script>
	</body>
</html>

选择跳水或自由落体

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
jQuery练习二：会员信息模块

一.需求<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.min.js"></script> <style> table { width: 820px; margin: 10px; } table tr
复制链接

扫一扫