浅谈表格（jq）的增、删、改、查

<table border="1" cellpadding="20" cellspacing="0">
			<thead>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<input type="text" class="name" placeholder="请输入姓名"/>
		<input type="text" class="age" placeholder="请输入年龄"/>
		<button class="add">添加</button><br>
		<input type="text" class="search" placeholder="请输入要查询的名字"/>
		<button class="sea">搜索</button><span class="dialog"></span><br />
		<button class="sort">排序</button><br />
		<button class="change">修改</button>
		<button class="save">保存</button>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

<style type="text/css">
			thead th{
				width: 50px;
				height: 50px;
				background: black;
				color: gold;
			}
		</style>

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

	
			
			/*****************添加的功能**********************************/

			$(‘.add‘).click(function(){
				var add_name=$(‘.name‘).val();
				var add_age=$(‘.age‘).val();
			 	var trs=$(‘tbody‘).children();
			 	if(add_name==‘‘||add_age==‘‘){
			 		alert(‘请输入内容‘);
			 	}else{
			 		$(‘tbody‘).append("<tr><td>"+(trs.length+1)+"</td><td>"+add_name+"</td><td>"+add_age+"</td><td><button class=‘del‘>删除</button></td></tr>");

			 	}
			 	del();
			 	x_sort();
			});

			
			
			
			
			
			
			
			
			/********************删除的功能*************************************/


			function del(){
				for(var i=0;i<$(‘.del‘).length;i++){
					$(‘.del‘).eq(i).click(function(){
						$(this).parent().parent().remove();
						x_sort();
					})
			
				}

			}
			del();
			
			/***********************搜索功能************************************/
			$(‘.sea‘).click(function(){
				var kaiguan=true;
				for(var i=0;i<$(‘tbody‘).children().length;i++){
					$(‘tbody‘).children().eq(i).css({‘background‘:‘black‘,‘text-align‘:‘center‘,‘color‘:‘gold‘,‘height‘:‘50px‘,‘width‘:‘50px‘});
					if($(‘tbody‘).children().eq(i).children().eq(1).text()==$(‘.search‘).val()){
					$(‘tbody‘).children().eq(i).css({‘background‘:‘gold‘,‘text-align‘:‘center‘,‘color‘:‘black‘,‘height‘:‘50px‘,‘width‘:‘50px‘});
						kaiguan=false;
					}
				}
				if(kaiguan==false){
					$(‘.dialog‘).html(‘‘);
				}else{
					$(‘.dialog‘).html(‘找不到信息！‘);
				}
			})
	
			
			
			
			
			
			/*********************排序*****************************/
			/*****序号排序********/
			
			function x_sort(){
				for(var i=0;i<$(‘tbody‘).children().length;i++){
					$(‘tbody‘).children().eq(i).children().eq(0).html(i+1);
				}
			}
//			/*************年龄排序****************/

			$(‘.sort‘).click(function(){
				var arr=[];
				for(var i=0;i<$(‘tbody tr‘).length;i++){
					arr.push(parseInt($(‘tbody tr‘).eq(i).children().eq(2).text()));
				};
				for(var j=0;j<$(‘tbody tr‘).length;j++){
					for(var k=j+1;k<$(‘tbody tr‘).length;k++){
						if(arr[k]>arr[j]){
							var tmp,temp;
							temp=arr[k];
							arr[k]=arr[j];
							arr[j]=temp;
							tmp=$(‘tbody tr‘).eq(j).html();
							$(‘tbody tr‘).eq(j).html($(‘tbody tr‘).eq(k).html());
							$(‘tbody tr‘).eq(k).html(tmp);
						}
					}
				}
				x_sort();
				del();
			})

			/********************修改内容********************/
//			$(‘.change‘).click(function(){
//				for(var i=0;i<$(‘tbody tr‘).length;i++){
//					$(‘tbody tr‘).children().attr(‘contenteditable‘,‘true‘);
//				}
//				$(‘.save‘).on(‘click‘,function(){
//					$(‘tbody tr‘).children().removeAttr(‘contenteditable‘);
//				})
//			});
			
			
			$(‘.change‘).click(function(){
				var even=function(){
					_self=$(this);
					_self.attr(‘contenteditable‘,‘true‘);
				}
				for(var i=0;i<$(‘tbody tr‘).length;i++){
					$(‘tbody tr‘).eq(i).children().on(‘click‘,even);
					(function(i){
						$(‘.save‘).on(‘click‘,function(){
							$(‘tbody tr‘).children().attr(‘contenteditable‘,‘false‘);
							$(‘tbody tr‘).children().off(‘click‘,even);
						})
					})(i);
				}
				
			})


		
		</script>

<script type="text/javascript">
			var add_btn = document.querySelector(".add");
			var name_inp = document.querySelector(".name");
			var age_inp = document.querySelector(".age");
			var search_btn = document.querySelector(".sea");
			var tbody = document.querySelector("table tbody");
			var sort_btn = document.querySelector(".sort");
			var change_btn = document.querySelector(".change");
			var save_btn = document.querySelector(".save");

			/*****************添加的功能**********************************/
			add_btn.addEventListener(‘click‘, function() {
					var add_name = name_inp.value;
					var add_age = age_inp.value;
					var trs = tbody.children;
					if(add_name == ‘‘ || add_age == ‘‘) {
						alert(‘请输入内容！‘);
					} else {
						tbody.innerHTML += "<tr><td>" + (trs.length + 1) + "</td><td>" + add_name + "</td><td>" + add_age + "</td><td><button class=‘del‘>删除</button></td></tr>"
						
						del();
						x_sort();
					}
					});

			/********************删除的功能*************************************/
			function del() {
				var del_btn = document.querySelectorAll(".del");
				for(var i = 0; i < del_btn.length; i++) {
					del_btn[i].addEventListener("click", function() {
						this.parentNode.parentNode.remove();
						x_sort();
					})
				}
			};

			/***********************搜索功能************************************/
			search_btn.addEventListener("click", function() {
				var search_ipn = document.querySelector(".search");
				var trs = tbody.children;
				var dialog = document.querySelector(".dialog");
				var kaiguan = true;
				for(var i = 0; i < trs.length; i++) {
					trs[i].style.cssText = "background: black; text-align: center; color: gold; height: 50px; width: 50px;";
					if(trs[i].firstElementChild.nextElementSibling.textContent == search_ipn.value) {
						trs[i].style.cssText = "background:gold;color:black; text-align: center;height: 50px; width: 50px;";
						kaiguan = false;
					}
				}
				if(kaiguan == false) {
					dialog.innerHTML = ""
				} else {
					dialog.innerHTML = "找不到啊！你个傻逼！";
				}
			});

			/*********************排序*****************************/
			/*****序号排序********/
			function x_sort() {
				var trs = tbody.children;
				for(var i = 0; i < trs.length; i++) {
					trs[i].firstElementChild.innerHTML = i + 1;
				}
			};
			/*************年龄排序****************/
			sort_btn.addEventListener("click", function() {
				var arr = [];
				var trs = tbody.children;
				for(var i = 0; i < trs.length; i++) {
					arr.push(Number(trs[i].firstElementChild.nextElementSibling.nextElementSibling.textContent))
				}
				for(var j = 0; j < trs.length; j++) {
					for(var k = j + 1; k < trs.length; k++) {
						if(arr[k] < arr[j]) {
							var tmp, temp;
							tmp = arr[k];
							arr[k] = arr[j];
							arr[j] = tmp;

							temp = trs[k].innerHTML;
							trs[k].innerHTML = trs[j].innerHTML;
							trs[j].innerHTML = temp;
						}
					}
				}
				//				x_sort();
			});
			/********************修改内容********************/
			change_btn.addEventListener("click", function() {
				var trs = tbody.children;
				var even = function() {
					var _self = this;
					_self.setAttribute("contenteditable", "true");
				}
				for(var i = 0; i < trs.length; i++) {
					trs[i].firstElementChild.nextElementSibling.addEventListener("click", even);
					(function(i) {
						save_btn.addEventListener("click", function() {
							trs[i].firstElementChild.nextElementSibling.setAttribute("contenteditable", "false");
							trs[i].firstElementChild.nextElementSibling.removeEventListener("click", even);
						})
					})(i);
				}
			});
		</script>