用js实现双击修改表单信息

最新推荐文章于 2022-09-15 13:07:19 发布

桐行路

最新推荐文章于 2022-09-15 13:07:19 发布

阅读量1.5k

点赞数

文章标签： java js servlet

本文链接：https://blog.csdn.net/zjt_1010/article/details/103580803

版权

案例目的

参考商品表，单击操作不可修改商品信息；当双击一个数据后，即可修改数据信息，当离开该数据范围后就修改成功（数据库中的数据信息也跟着修改成功）。

实现思路

1.在table中显示商品信息，每一条商品信息都为readonly状态
2.再通过js（即在script标签中）为每个数据标签绑定一个双击事件，双击该元素时就将该元素readonly状态变为false(即可编辑状态)。
3.为该数据标签绑定一个鼠标事件，当鼠标移出时触发，将修改信息提交到servlet中处理，完成数据的修改。

实现过程

search.jsp¹

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>search</title>
</head>
<body>
<form action="dbGoodsServlet" method="post">
	商品类型：<input type="text" name="goodsType" id="goodsType"/>
	商品名：<input type="text" name="goodsName" id="goodsName"/>
	<!--使用隐藏域，传递状态变量  -->
	<input type="hidden" name="status" value="select"/>
	<input type="submit" value="查询"/> 
</form>
</body>
</html>

dbGoodsServlet.java²

package com.task.servlet;

import java.io.IOException;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.jstl.sql.Result;

import com.task.utils.Dbutils;


public class DbGoodsServlet extends HttpServlet {
	
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获取状态
		String status = request.getParameter("status");
		System.out.println(status);
		if("select".equals(status)){
			selectGoods(request,response);
		}else if("delete".equals(status)){
			deleteGoods(request,response);
		}else if("update".equals(status)){
			updateGoods(request,response);
		}
		
	}
	/**
	 * 查看商品信息
	 */
	public void selectGoods(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
		//获取商品类型和商品名称
		String goodsName = request.getParameter("goodsName").trim();
		String goodsType = request.getParameter("goodsType").trim();
		StringBuffer sql=new StringBuffer("select * from tb_goods where 1=1");
		//创建List对象,存放要传递的参数
		List params=new ArrayList();
		if(!"".equals(goodsName)){//商品名不为空,添加执行条件
			sql.append(" and goodsName=?");
			params.add(goodsName);
		}
		if(!"".equals(goodsType)){
			sql.append(" and goodsType=?");
			params.add(goodsType);
		}
		//调用有返回值，有参数的函数执行SQL语句
		String stringsql = sql.toString();
		Result result = Dbutils.runSelecSql(stringsql, params);
		request.setAttribute("result", result);
		request.getRequestDispatcher("dbUpdateGoods.jsp").forward(request, response);
	}
	/**
	 * 删除商品信息
	 */
	public void deleteGoods(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
		//获取到要删除的商品的编号
		String id = request.getParameter("id");
		String sql="delete from tb_goods where id=?";
		List params=new ArrayList();
		params.add(id);
		//调用无返回值，有参数的方法
		boolean runUpdateSql = Dbutils.runUpdateSql(sql,params);
		this.selectGoods(request, response);
	
	}
	/**
	 * 修改商品信息
	 */
	public void updateGoods(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
		//获取到要修改的商品的编号
		String goodsId = request.getParameter("goodsId");
		String updateDate = request.getParameter("updateDate");//要修改的字段值
		String name = request.getParameter("name");//要修改的字段
		
		String sql="update tb_goods set "+name+" =? where id=?";
		List params=new ArrayList();
		params.add(request.getParameter("updateDate"));
		params.add(request.getParameter("goodsId"));
		//调用无返回值，有参数的函数
		boolean flag = Dbutils.runUpdateSql(sql, params);
		if(!flag){
			request.setAttribute("msg", "修改失败");
			System.out.println("修改失败");
		}
		System.out.println("修改成功");
		this.selectGoods(request, response);
		
	}
}

dbUpdateGoods.jsp³

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="javax.servlet.jsp.jstl.sql.*,java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>双击修改商品信息</title>
</head>
<style type="text/css">
	td,th{
		text-align: center;
		line-height:40px;
	}
	input {
		width:80%;
		height:30px;
		text-align: center;
		border:0px;
	}
</style>
<body>
	<c:if test="${result.getRowCount()>0 }" var="status">
		<table border="1" cellpadding="0" cellspacing="0" width="80%" height="400px">
		<th>商品编号</th>
		<th>商品名</th>
		<th>生产日期</th>
		<th>产地</th>
		<th>商品类型</th>
		<th>操作</th>
		<c:forEach items="${result.getRows() }" var="map">
			<tr><td><input type="text" value="${map.id }" name="id" readonly="readonly" /></td>
				<td><input type="text" value="${map.goodsName}" name="goodsName" readonly="readonly" /></td>
				<td><input type="text" value="${map.productedDate }" name="productedDate" readonly="readonly"/></td>
				<td><input type="text" value="${map.filed }" name="filed" readonly="readonly"/></td>
				<td><input type="text" value="${map.goodsType }" name="goodsType" readonly="readonly"/></td>
				<td>
					<input type="button" value="删除" onclick="deleteGoods('${map.id}"/>&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
			</tr>
		</c:forEach>
		</table>
	</c:if>
	<!-- 借助隐藏域来存储用户输入 -->
	<input type="hidden" id="goodsType" value="<%=request.getParameter("goodsType") %>"/>
	<input type="hidden" id="goodsName" value="<%=request.getParameter("goodsName") %>"/>
</body>
<script type="text/javascript">
	window.onload=function(){
		if(${msg!=null}){
			alert('${msg}');
			<%
				request.removeAttribute("msg");
			%>
		}
	}
	
	function $(id){
		return document.getElementById(id);
	}
	
	function deleteGoods(id){
		var flag=window.confirm("确定要删除吗？");
		if(flag){
			location.href="goodsServlet?id="+id+"&status=delete&goodsName="+$("goodsName").value+"&goodsType="+$("goodsType").value;
		}
	}
	
	var input=document.getElementsByTagName("input");
	for(var i=0;i<input.length;i++){
		var realNum;//修改之前的数据值
		input[i].ondblclick=function(){/* 为标签绑定双击事件 ,双击后变为可编辑状态*/
			if(this.name=='id'){
				return ;
			}
			this.readOnly=false;
			realNum=this.value;
		}

		input[i].onmouseout=function(){
			 /* 如果鼠标移除之前，该文本框就为只读状态，则不必进行任何操作  */
			if(this.readOnly==true){
				return ;
			}
			/*如果商品数量未改变，只需将 文本框的状态变为只读状态即可*/
			var nownum=this.value;//修改之后的值
			if(realNum==nownum){
				this.readOnly="true";
				return ;
			}
			/*如果nownum变为空，则将原来的number填入文本框中*/
			if(this.value==''){
				this.value=number;
				this.readOnly="true";
				return ;
			}
			/*文本框的值改变，则改变数据库中商品的数量，待修改完成后将文本框的状态改为只读  */
			var updateDate=this.value;
			var goodsId=this.parentNode.parentNode.firstChild.firstChild.value
			this.readOnly="true";
			var name=this.name;
			location.href="dbGoodsServlet?status=update&goodsId="+goodsId+"&updateDate="+updateDate+"&name="+name+"&goodsName="+$("goodsName").value+"&goodsType="+$("goodsType").value;  
		} 
	}
	
</script>
</html>

查找商品的页面 ↩︎
处理页面信息的servlet ↩︎
通过双击修改商品信息页面 ↩︎

桐行路

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用js实现双击修改表单信息

目录案例目的实现思路实现过程案例目的参考商品表，单击操作不可修改商品信息；当双击一个数据后，即可修改数据信息，当离开该数据范围后就修改成功（数据库中的数据信息也跟着修改成功）。实现思路1.在table中显示商品信息，每一条商品信息都为readonly状态2.再通过js（即在script标签中）为每个数据标签绑定一个双击事件，双击该元素时就将该元素readonly状态变为false(即可编...
复制链接

扫一扫