上一篇写的是用DOM来操作table的,这篇采用的是jquery. 自己需要一个jquery.js文件.
写道
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>My JSP '2.jsp' starting page</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">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<style type="text/css">
th {
background: #0066FF;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
td * {
padding: 6px 11px;
}
tr.alt td{
background: #ecf6fc;
}
tr.over td{
background: #bcd4ec;
}
</style>
<script type="text/javascript">
var this_ago;
var name;
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
$(".stripe tr:even").addClass("alt");
//加事件(双击替换文本) //:td:first-child
$(".stripe tr td").dblclick(function() {
if(this_ago!=null){
if(this_ago!=this){
huanyuan(this_ago);
}else{
//点击同一个先判断当前值和开始值是否相等;不能的话可以修改
if(name==""||name==null){
return;
}else{
if(inname!=""&&inname!=null){
if(inname!=name){
}else{
return;
}
}else{
//返回
return;
}
}
}
}
if($(this).text()!=""&&$(this).text()!=null){
var name2=$(this).text();//替换文本框
if(name2!=""&&name2!=null){
this_ago=this;
name=name2;
$(this).empty();
$(this).append("<input name='name' onchange=getNa(this) value='"+name+"' size='8'>");
}
}
});
})
//onchange文本框onchange时调用该方法
var inname;//文本框的值
function getNa(para){
inname=para.value;
var tdv=document.createTextNode(inname);
para.replaceNode(tdv);
}
//还原
var iname1;
function huanyuan(obj){
if(inname!=""&&inname!=null){
if(inname!=name){
$(obj).empty();
//判断是否改变
if(iname1!=inname){
$(obj).append(inname);
}else{
//相等的话说明没改变就要用当前的name来默认
$(obj).append(name);
}
iname1=inname;
}else{
$(obj).empty();
$(obj).append(name);
}
}else{
$(obj).empty();
$(obj).append(name);
}
}
</script>
</head>
<body>
<table class="stripe" width="200" border="0" cellpadding="1" cellspacing="1">
<tr>
<th width="50">序号</th><th width="150">名字</th>
</tr>
<tr>
<td>1</td><td>AAA</td>
</tr>
<tr>
<td>2</td><td>BBB</td>
</tr>
<tr>
<td>3</td><td>CCC</td>
</tr>
<tr>
<td>4</td><td>DDD</td>
</tr>
<tr>
<td>5</td><td>EEE</td>
</tr>
</table>
</body>
</html>
- 大小: 8.9 KB
分享到:
相关推荐
主要介绍了PHP+jQuery实现双击修改table表格功能,涉及php数组读取、遍历及jQuery动态响应修改页面元素属性相关操作技巧,需要的朋友可以参考下
jquery 编辑table 实例一行编辑 实例二双击编辑单元格
jquery将table表格变成可编辑,解压压缩包,双击html页面即可看效果
主要介绍了jQuery实现获取table中鼠标click点击位置行号与列号的方法,涉及jQuery事件响应及针对table表格元素相关操作技巧,需要的朋友可以参考下
主要介绍了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法,涉及jQuery响应鼠标事件动态操作页面元素及基于get实现ajax交互保存数据的相关技巧,需要的朋友可以参考下
table双击td修改内容。纯手工,纯前端无后端。可以应用后端,不过需要自己修改样式。白嫖党:https://blog.csdn.net/qq_38508172/article/details/82660950
摘要:脚本资源,jQuery,表格排序插件, jquery表格插件 jquery.table.sort.js-jquery表格排序插件,不管是双击表头的哪一个标题,数据都会按照点击的表头进行排序,以一个活动列表来演示如何为表格排序,这里请注意,...
table表格的增删改功能,鼠标左键双击可编辑,下方按钮增加,右侧删除,表格数据计入localstorage,不会因刷新而消失
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...
比较,双击后最大化和最小化。指定第N列的最小宽度等。$("#<%=gridView.ClientID%>").movedHead({ colSize: '{"col0":{"col":0,"val":55}' }); 指定第一列宽度为55个px。 也可以设置默认最小列宽,zIndex参数。其它...
DataTable API table.row(rowSelector [,modifier]) 注table是dataTable的对象 该方法有两个默认参数 第一个是选择器 第二个是可选的 请注意,如果选择器匹配多个行,则此方法将截断结果以仅包含一行,即第一个...
功能: 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容。 主要实现思路: 选中,移动选中区域等都是依靠jQuery强大...
固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML – 模板代码: 代码如下: <table id=”test”> ”header”> ’true’> 姓名 </td> ’true’> 性别 </td> ’true’> 年龄 </td> ...
所以要做的话还是用通用的csv(Comma Separated Value,逗号分隔值)格式吧. 各种办公软件都能识别csv表格,其实就是以特定分隔符(比如逗号)分隔单元格的表格. 拿PHP来说,fgetcsv读入csv表格,返回一个数组, 然后foreach...
在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...
发送消息,同时对文本进行少量修改,发送end-of-messages消息,最后关闭连接。 Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单...
发送消息,同时对文本进行少量修改,发送end-of-messages消息,最后关闭连接。 Tcp服务端与客户端的JAVA实例源代码 2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单...