js实现表格点击编辑

js实现表格点击编辑

一般后台的增删查改会将数据加载到表格中，而修改则可以直接点击表格实现，这里表格的代码我直接用Java代码了

<table class="tableBody" align="center" bordercolor="#66CCFF"
	style="width: 1000px;border:1;cellspacing:0" valign="top">
	<tr>
		<td bordercolor="#66CCFF">商品图片</td>
		<td bordercolor="#66CCFF">商品ID</td>
		<td bordercolor="#66CCFF">商品名称</td>
		<td bordercolor="#66CCFF">商品类别</td>
		<td bordercolor="#66CCFF">价格</td>
		<td bordercolor="#66CCFF">库存量</td>
		<td bordercolor="#66CCFF">入库时间</td>
		<td bordercolor="#66CCFF"></td>
	</tr>
	 <%
		ArrayList<Goods> list=null;
	    String search_goods= request.getParameter("search_input");
	 	if(search_goods!=null){
	 		list = new GoodsDao().getAdminGoods(search_goods);
	 	}else{
			list = new GoodsDao().getGoodsList();
	 	}
		for(int i=0;list!=null&&i<list.size();i++){
			Goods gs = list.get(i);
			out.write("<tr>");
			out.write("<td  bordercolor='#66CCFF'><a href='' target='_blank'><img alt='' src='"+gs.getPic()+"' /> </a> </td>");
			out.write("<td  bordercolor='#66CCFF'>"+gs.getId()+"</td>");
			out.write("<td class='td_edit' bordercolor='#66CCFF'>"+gs.getName()+"</td>");
			out.write("<td class='td_edit' bordercolor='#66CCFF'>"+gs.getType()+"</td>");
			out.write("<td class='td_edit' bordercolor='#66CCFF'>"+gs.getPrice()+"</td>");
			out.write("<td class='td_edit' bordercolor='#66CCFF'>"+gs.getTotal()+"</td>");
			out.write("<td class='td_edit' bordercolor='#66CCFF'>"+gs.getTime()+"</td>");
			out.write("<td bordercolor='#66CCFF'><button id='edit' disabled='disabled' οnclick='tableEdit(this)'>修改</button>&nbsp;");
			out.write("<button id ='delet'><a href='AdminServlet?tp=delet&goodsid="+gs.getId()+"'>删除</a></button></td>");
			out.write("</tr>");
		}
	%>					
</table>

js实现点击修改
首先引入在线jQuery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

js控制

<script>
	//在页面加载时候，就使td节点具有click点击能力
	$(document).ready(function() {
			//给所有td添加点击事件
		var tdNods = $(".td_edit");
		tdNods.click(tdClick);//点击调用tdClick方法
		$(".edit").click(function(){
			alert("点击测试");
		});
	});
	
	function tdClick() {
		//点击时将文本框内容保存、插入输入框、将文字写入输入框
		// 将td的文本内容保存
		var td = $(this);
		var trChildren = td.parent("tr").children();
		var tdText = td.text();//未修改的值
		// 将td的内容清空
		td.empty();
		// 新建一个输入框
		var input = $("<input>");
		// 将保存的文本内容赋值给输入框
		input.val(tdText);
		input.width(td.width());
		// 将输入框添加到td中
		td.append(input);
		// 双击获取基础数据
		input.dblclick(function() {
		});
		
		input.blur(function() {
			// 将输入框的文本保存
			var input = $(this);
			var inputText = input.val();
			// 将td的内容，即输入框去掉,然后给td赋值
			var td = input.parent("td");
			td.html(inputText);//修改后的值
			// 让td重新拥有点击事件
			if(inputText!=tdText){
				//如果点击的单元格内容发生了变化，则设置按钮为可点击
				td.parent("tr").find("#edit").removeAttr("disabled");
			}
			td.click(tdClick);
		});

		// 将jquery对象转化为DOM对象
		var inputDom = input.get(0);
		inputDom.select();
		// 将td的点击事件移除
		td.unbind("click");
	}
	
	//点击修改时将数据提交到Servlet写入数据库
	function tableEdit(self){
		var goodsid = self.parentNode.parentNode.children[1].innerHTML;
		var name = self.parentNode.parentNode.children[2].innerHTML;
		var type = self.parentNode.parentNode.children[3].innerHTML;
		var price = self.parentNode.parentNode.children[4].innerHTML;
		var total = self.parentNode.parentNode.children[5].innerHTML;
		var time = self.parentNode.parentNode.children[6].innerHTML;
		window.location.href="AdminServlet?tp=edit&name="+name+"&type="+type+"&price="+price+"&total="+total+"&time="+time+"&goodsid="+goodsid;
	}
</script>