本文介绍了一个基于jQuery实现的可编辑后台修改的表格功能。通过点击表格单元格，用户可以编辑内容，并通过AJAX异步更新数据库。文章展示了完整的jQuery JavaScript代码及对应的JSP页面结构。
基于jquery可编辑后台修改的表格
$(document).ready(function() {
var tdNods = $("#zrenyuan td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick() {
var td = $(this);
//将td的文本内容保存
var tdText = td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input = $("<input>").width(td.width());
//将保存的文本内容赋值给输入框
input.attr("value", tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function() {
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
if (inputText == " " || inputText.length == 0) {
alert("输入不能为空！");
var td = input.parent("td");
td.html(tdText);
//让td重新拥有点击事件
td.click(tdClick);
} else {
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
}
;
if (tdText != inputText) {
var userid = 0;
var name = 0;
var bumenid = 0;
//假设点击第一列
if ($.trim(td.prev().text()) == ""
&&
($.trim(td.next().next().next().text()) == "")) {
userid = $.trim(td.text());
name = $.trim(td.next().text());
bumenid = $.trim(td.next().next().text());
}
//假设点击第二列
if ($.trim(td.prev().prev().text()) == ""
&&
($.trim(td.next().next().text()) == "")) {
userid = $.trim(td.prev().text());
name = $.trim(td.text());
bumenid = $.trim(td.next().text());
}
//假设点击第三列
if ($.trim(td.prev().prev().prev().text()) == ""
&& ($.trim(td.next().text())
== "")) {
userid = $.trim(td.prev().prev().text());
name = $.trim(td.prev().text());
bumenid = $.trim(td.text());
}
// AJAX异步更改数据库
var url = "renyuangenggai.action";
$.post(url, {
renyuanid : userid,
name : name,
bumenid : bumenid
});
} else {
// 前后文本一致,把文本框变成标签
input.parent("td").html(inputText);
}
});
input.keyup(function(event) {
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是ESC键按下
if (keyCode == 27) {
//将input输入框的值还原成修改之前的值
input.val(tdText);
}
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
jsp代码
<body>
<div id="zrenyuan">
<%
ArrayList<Users> Renyuanlist =
(ArrayList<Users>) request
.getAttribute("Rlist");
int bumenid = 0;
String texttip = "";
if (Renyuanlist.size() != 0) {
bumenid =
Renyuanlist.get(0).getTBumenbiao().getBumenid();
} else {
texttip = "该部门用户为空！请添加！";
}
%>
<%=texttip%>
<table id="ztable"
border="2">
<thead>
<tr>
<th
class="checkbox"><input
type="checkbox"
id="chk_all"
name="chk_all"/>全选</th>
<th
class="renyuanid">人员id</th>
<th
class="name">人员名</th>
<th
class="group">职位</th>
<th
class="bumenid">部门id</th>
</tr>
</thead>
<tbody>
<%
for (int i = 0; i < Renyuanlist.size(); i++)
{
%>
<tr class="mytr">
<td
align="center"><input type="checkbox"
name="chk_list"></input></td>
<td
class="renyuanid"><%=Renyuanlist.get(i).getRenyuanId()%></td>
<td
class="name"><%=Renyuanlist.get(i).getName()%></td>
<%
if (Renyuanlist.get(i).getGroup().toString().equals("0"))
{
%>
<td
class="group">经理</td>
<%
} else {
%><td
class="group">员工</td>
<%
}
%>
<td
class="bumenid"><%=Renyuanlist.get(i).getTBumenbiao().getBumenid()%></td>
</tr>
<%
}
%>
</tbody>
</table>
<span
id="text"></span>
</div>
</body>
扫一扫
1898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
