表格增删改查排序(jq方法第一版)

Posted 2020-09-26 LWJ_jay

功能:

1.动态添加表格

2.动态删除表格，想删就删，任性

3.动态修改数据，就是看不顺眼，改，改，改

4.动态\'查户口\'

5.序列号动态改变，你加内容我变，你删除内容我也变

6.客户就是上帝

效果图：

CSS代码：

一个字:没有。原始样式，想怎么改就怎么改。

html代码：

　　　　　　　　<table cellspacing="0">
			<thead>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>林伟健</td>
					<td>20</td>
					<td><button class="del">删除</button></td>
				</tr>
			</tbody>
		</table>
		<form action="">
			姓名:<input type="text" id="name" /><br /> 
			年龄:<input type="text" id="old" /><br />
			<!--添加按钮-->
			<input type="button" value="添加" id="add" /><br />
			<!--搜索按钮-->
			<input type="text" id="search" /><input type="button" id="sou" value="搜索" />
			<span class="message"></span>
			<input type="button" value="排序" id="paixu" />
			<input type="button" id="gai" value="修改" />
			<input type="button" id="baocun" value="保存" />

		</form>

JQ代码：

　　　　　　　　<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			/****************添加功能*********************/
			$(function() {
				/************添加事件***************/
				$(\'#add\').click(function() {
					//获取姓名和年龄的值
					var name = $(\'#name\').val();
					var old = $(\'#old\').val();
					//获取序列号
					var len = $(\'tbody\').children();
					//判断内容是否为空
					if(name == \'\' || old == \'\') {
						alert(\'内容不能为空!\');
					} else {
						//添加tr
						$(\'tbody\').append("<tr><td>" + (len.length + 1) + "</td><td>" + name + "</td><td>" + old + "</td><td><button class=\'del\'>删除</button></td></tr>");
					}
					del(); ///调用del()，删除后来加的的tr

				});
				/****************删除事件**********************/
				function del() {
					for(var i = 0; i < $(\'.del\').length; i++) {
						$(\'.del\').eq(i).click(function() {
							$(this).parent().parent().remove();
							pai(); //每次点击删除按钮，都会重新给序号赋值
						})

					}
				}
				del(); //调用del()，删除原来的tr
				/*****************搜索事件*****************************/
				$(\'#sou\').click(function() {
					var x = true; //开关，判断是否找到了
					for(var i = 0; i < $(\'.del\').length; i++) {
						$(\'tbody tr\').eq(i).css(\'background\', \'\');
						if($(\'tbody tr\').eq(i).children().eq(1).text() == $(\'#search\').val()) {
							$(\'tbody tr\').eq(i).css(\'background\', \'yellow\');
							x = false;
						} else {
							$(\'.message\').text("找不到:" + $(\'#search\').val());
						}
						//如果找到了x=false，.message的值就为空!
						if(x == false) {
							$(\'.message\').text(\'\');
						} else {
							$(\'.message\').text("找不到:" + $(\'#search\').val());
						}
					}

				});
				/********************序号排序***************************/
				function pai() {
					for(var i = 0; i < $(\'tbody tr\').length; i++) {
						$(\'tbody tr\').eq(i).children().eq(0).text(i + 1);
					}
				};
				/**********************年龄排序***********************************/
				$(\'#paixu\').click(function() {
					var arr = [];
					for(var i = 0; i < $(\'tbody tr\').length; i++) {
						//把数据推送到数组里面
						arr.push(Number($(\'tbody tr\').eq(i).children().eq(2).text()));
						console.log("124");
					}
					//给tr整行内容冒泡排序
					for(var x = 0; x < arr.length; x++) {
						for(var y = x + 1; y < arr.length; y++) {
							if(arr[x] > arr[y]) {
								var tem, empty;
								empty = arr[x];
								arr[x] = arr[y];
								arr[y] = empty;
								tem = $(\'tbody tr\').eq(x).html();
								$(\'tbody tr\').eq(x).html($(\'tbody tr\').eq(y).html());
								$(\'tbody tr\').eq(y).html(tem);
							}
							pai();
							del();
						}
					}
				});
				/****************在页面修改内容*********************/
				$(\'#gai\').click(function() {
					for(var i = 0; i < $(\'tbody tr\').length; i++) {
						$(\'tbody tr\').eq(i).children().attr("contenteditable", "true");
					}
				})
				$(\'#baocun\').click(function() {
					for(var i = 0; i < $(\'tbody tr\').length; i++) {
						$(\'tbody tr\').eq(i).children().removeAttr(\'contenteditable\');
					}
				})
			});
		</script>

　来波订阅吧，祝老板月抛成功!