技術標籤：jquery

功能：
增加：複製第一行插入在最後
查詢：在文字框中輸入id號，查相對應的資訊
刪除：刪除該行
修改：隱藏“修改”，顯示“儲存”，在非功能td裡面插入文字框，在文字框中輸入要修改的值，點選“儲存”
儲存：儲存td裡面input的值，點選儲存以後，隱藏“儲存”，顯示“修改”

body內標籤

<p>
			<a href="#">增加</a>
			<input type="text"/>
			<a href="#">查詢</a>
		</
 
p>
		<table border="1px">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>薪水</th>
				<th>功能</th>
			</tr>
			<tr>
				<td class="id">1</td>
				<td>張三</td>
				<td>8000</td>
				<
 
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">2</td>
				<td>李四</td>
				<td>9000</td>
				<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="<input type='text' value='"+$td.text()+"'/>";
							$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>