1、EditTable.jsp 文件
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑的表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<link rel="stylesheet" type="text/css" href="css/editTable.css">
<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//用Jquery实现隔行换色
$("#table1 tbody tr:even").css("background", "#ECF5FF");
$("#table1 tbody td:even").dblclick(function(){
var inputObj = $("<input type='text'/>");
var tdObj = $(this);
//当前td中有input,不执行dblclick处理
if(tdObj.children("input").length > 0){
return false;
}
//获得td中的内容
var text = tdObj.html();
//将当前td中的内容放到文本框中
inputObj.val(text);
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
//使文本框的高度和td的高度相同
inputObj.height(tdObj.height());
//设置文本框的边框为0
inputObj.css("border-width","0px");
//设置文本框中的文字大小是16px
inputObj.css("font-size","18px");
//设置文本框的背景色
inputObj.css("background-color",tdObj.css("background-color"));
//清空td中的内容
tdObj.html("");
//将文本框插入到td中
tdObj.html(inputObj);
//选中文本框
inputObj.get(0).select();
//双击文本框不触发td的双击事件
inputObj.dblclick(function(){
return false;
});
//处理文本框上回车和esc按键的操作
inputObj.keyup(function(event){
//获得键值
var keyCode = event.which;
//处理回车的情况
if(keyCode == 13){
tdObj.html($(this).val());
}
//处理esc的情况
if(keyCode == 27){
tdObj.html(text);
}
});
});
});
</script>
</head>
<body>
<table id="table1" border="1px" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<td colspan="2" align="center">鼠标点击表格项就可以编辑</td>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</body>
</html>
2、editTable.css 文件
table {
border: 1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse: collapse;
width: 400px;
}
table td {
border: 1px solid black;
width: 50%;
}
table th {
border: 1px solid black;
width: 50%;
}
tbody th {
background-color: #A3BAE9;
}
分享到:
相关推荐
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
jquery可编辑表格代码实现
JQuery实现的简单可编辑表格,其中的数据可以根据需要从数据里读取,这里暂时写成静态的,只是为了演示一下JQuery的方便之处。
JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx
JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
jQuery 可编辑表格, 使用 Jqrery 快速实现表格的编辑功能,单击修改表格内容,样式可调。轻量级的 H5代码。
JQuery实现可编辑的表格JQuery实现可编辑的表格
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
jQuery实现可编辑化的表格,有兴趣的可以看看
代码片段: 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table>
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jquery可编辑表格可以对表格进行无刷新的编辑
jQuery+Bootstrap表格内容修改删除编辑插件,随便传的
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip