jsp表格修改数据并提交
哪位大神看下,我要修改table的值,然后要获取改修完的值到servlet,获取我是成功了,但是获取到的一直是修改之前的值,能告诉我为啥不
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 包含公共的JSP代码片段 -->
<title>无线点餐平台</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="style/js/jquery.js"></script>
<script type="text/javascript" src="style/js/page_common.js"></script>
<link href="style/css/common_style_blue.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style/css/index_1.css" />
</head>
<body>
<!-- 页面标题 -->
<div id="TitleArea">
<div id="TitleArea_Head"></div>
<div id="TitleArea_Title">
<div id="TitleArea_Title_Content">
<img border="0" width="13" height="13" src="style/images/title_arrow.gif"/> 用户列表
</div>
</div>
<div id="TitleArea_End"></div>
</div>
<!-- 过滤条件 -->
<div id="QueryArea">
<form action="selectUserServlet" method="post">
<input type="hidden" name="method" value="search">
<input type="text" id="name" name="keyword">
<input type="submit" onclick="emptyname()" value="搜索">
</form>
</div>
<!-- 主内容区域(数据列表或表单显示) -->
<div id="MainArea">
<form action="textServlet" method="post">
<input type="hidden" id="one" name="one" value=""/>
<input type="hidden" id="two" name="two" value=""/>
<input type="hidden" id="three" name="three" value=""/>
<input type="hidden" id="four" name="four" value=""/>
<table class="MainArea_Content" align="center" cellspacing="0" cellpadding="0">
<!-- 表头-->
<thead>
<tr align="center" valign="middle" id="TableTitle">
<td>用户编号</td>
<td>用户名</td>
<td>密码</td>
<td>权限</td>
<td>操作</td>
</tr>
</thead>
<!--显示数据列表 -->
<tbody id="TableData">
<tr class="TableDetail1">
<td class="caname" id="biaohao">${U.id}</td>
<td class="caname" id="username">${U.username}</td>
<td class="caname" id="password">${U.password}</td>
<td class="caname" id="role">${U.role}</td>
<td>
<input type="submit" onclick="demo()" class="FunctionButton" value="更新">
<a href="delUserServlet?id=${U.id}" onclick="return confirm('确定删除编号为${U.id}的记录')" class="FunctionButton">删除</a>
</td>
</tr>
</tbody>
</table>
</form>
<!-- 其他功能超链接 -->
<div id="TableTail" align="center">
<div class="FunctionButton"><a href="addUser.jsp">添加</a></div>
<div class="FunctionButton"><a href="AllUserServlet">所有用户</a></div>
</div>
</div>
</body>
<script>
var bh= document.getElementById("biaohao").innerText;
var un=document.getElementById("username").innerText;
var pw=document.getElementById("password").innerText;
var rl=document.getElementById("role").innerText;
$(function() { // 相当于在页面中的body标签加上onload事件
$(".caname").click(function() { // 给页面中有caname类的标签加上click函数
var objTD = $(this);
var oldText = $.trim(objTD.text()); // 保存老的类别名称
var input = $("<input type='text' value='" + oldText + "' />"); // 文本框的HTML代码
objTD.html(input); // 当前td的内容变为文本框
// 设置文本框的点击事件失效
input.click(function() {
return false;
});
// 设置文本框的样式
input.css("border-width", "0px"); //边框为0
input.height(objTD.height()); //文本框的高度为当前td单元格的高度
input.width(objTD.width()); // 宽度为当前td单元格的宽度
input.css("font-size", "14px"); // 文本框的内容文字大小为14px
input.css("text-align", "center"); // 文本居中
input.trigger("focus").trigger("select"); // 全选
// 文本框失去焦点时重新变为文本
input.blur(function() {
var newText = $(this).val(); // 修改后的名称
var input_blur = $(this);
// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
// 获取该类别名所对应的ID(序号)
var caid = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();
$.get(url, function(data) {
if (data == "false") {
$("#test").text("类别修改失败,请检查是否类别名称重复!");
input_blur.trigger("focus").trigger("select"); // 文本框全选
} else {
$("#test").text("");
objTD.html(newText);
}
});
} else {
// 前后文本一致,把文本框变成标签
objTD.html(newText);
}
});
// 在文本框中按下键盘某键
input.keydown(function(event) {
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi) {
case 13: // 按下回车键 ,把修改后的值提交到数据库
// $("#test").text("您按下的键值是: " + jianzhi);
var newText = input_keydown.val(); // 修改后的名称
// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
// 获取该类别名所对应的ID(序号)
var caid = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();
$.get(url, function(data) {
if (data == "false") {
$("#test").text("类别修改失败,请检查是否类别名称重复!");
input_keydown.trigger("focus").trigger("select"); // 文本框全选
} else {
$("#test").text("");
objTD.html(newText);
}
});
} else {
// 前后文本一致,把文本框变成标签
objTD.html(newText);
}
break;
case 27: // 按下Esc键, 取消修改,把文本框变成标签
$("#test").text("");
objTD.html(oldText);
break;
}
});
});
});
// 屏蔽Enter按键
$(document).keydown(function(event) {
switch (event.keyCode) {
case 13: return false;
}
});
function demo()
{
alert(un);
document.getElementById("one").value=bh;
document.getElementById("two").value=un;
document.getElementById("three").value=pw;
document.getElementById("four").value=rl;
}
</script>
</html>