jQuery表格增删改查

jQuery表格增删改查_第1张图片
功能:
增加:复制第一行插入在最后
查询:在文本框中输入id号,查相对应的信息
删除:删除该行
修改:隐藏“修改”,显示“保存”,在非功能td里面插入文本框,在文本框中输入要修改的值,点击“保存”
保存:保存td里面input的值,点击保存以后,隐藏“保存”,显示“修改”

body内标签

<p>
			<a href="#">增加a>
			<input type="text"/>
			<a href="#">查询a>
		p>
		<table border="1px">
			<tr>
				<th>IDth>
				<th>姓名th>
				<th>薪水th>
				<th>功能th>
			tr>
			<tr>
				<td class="id">1td>
				<td>张三td>
				<td>8000td>
				<td>
					<a href="#" class="save" style="display: none;">保存a>
					<a href="#" class="xg">修改a>
					<a href="#" class="sc">删除a>
				td>
			tr>
			<tr>
				<td class="id">2td>
				<td>李四td>
				<td>9000td>
				<td>
					<a href="#" class="save" style="display: none;">保存a>
					<a href="#" class="xg">修改a>
					<a href="#" class="sc">删除a>
				td>
			tr>
		table>

css样式

jQuery脚本

<script>
			$(function(){
				//增加事件
				$("a:contains('增加')").click(function(){
					$("table tr:eq(1)").clone(true).appendTo($("table tr:eq(1)").parent());
				})
				//查询事件
				$("a:contains('查询')").click(function(){
					var $aa=$(this).siblings().eq(1).val();//获取文本框的值
					if($aa!="")
					{
						
						$(".id").each(function(){
							if($(this).text()==$aa)
							{
								$(this).parent().show();
								$(this).parent().siblings().hide();
							}
						})
					}
					
				})
				//删除事件
				$("a:contains('删除')").click(function(){
					$(this).parent().parent().remove();
				})
				//修改事件
				$("a:contains('修改')").click(function(){
					var $a=$(this).parent().parent().children();//获取当前列的td集合
					for(var i=0;i<$a.length;i++)
					{
						var $td=$a.eq(i);
						if($td.children().length<=0)
						{
							var html="";
							$td.html(html);
						}
					}
					$(".xg").hide();
					$(".save").show();
				})
				//保存按钮
				$("a:contains('保存')").click(function(){
					var $tr=$(this).parent().parent();//获取tr
					var $an=$tr.find("input[type='text']");
					for(var i=0;i<$an.length;i++)
					{
						var ipt=$an.eq(i);
						ipt.parent().text(ipt.val());
						ipt.remove();
					}
					$(".xg").show();
					$(".save").hide();
				})
			})
		script>

你可能感兴趣的:(jquery)