`
cuiran
  • 浏览: 82263 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

(JQuery)双击修改table里面的值

jQueryCSSJavaScriptJSPCache 
阅读更多

上一篇写的是用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
  • 2.rar (1.6 KB)
  • 下载次数: 787
分享到：
| 双击修改table里面的值
评论
4 楼 fnet 2010-01-20  
Teok 写道
对event对象的target(or srcElement)做个判断就行了。总之whiletrue的观点是很正确的。


是的，完全可以，送个例子给楼主。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("table").click(function(e){     
		var clicked = $(e.target);
		if ( clicked.attr("tagName") == 'TD' ) {
			clicked.css("background", "red");
		}
	});
});
</script>
</HEAD>

<BODY>
	<table>
		<tr>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
		</tr>
	</table>
</BODY>
</HTML>
3 楼 Teok 2009-12-15  
对event对象的target(or srcElement)做个判断就行了。总之whiletrue的观点是很正确的。
2 楼 wucc1986 2009-12-12  
$('#myTable td').click(function(){
    $(this).css('background', 'red');
});
改进方式：
$('#myTable').click(function(e) {

     var $clicked = $(e.target);

     $clicked.css('background', 'red');

});
这样不是所有table里的元素 点击了都会触发吗？ 我只要点击td呢，点击其他就不触发。
1 楼 whiletrue 2009-12-12  
$(".stripe tr td").dblclick(function() {
这样绑定的时间太多,其实可以绑在stripe 上.
下面是抄来的.....
---------------------------------------------------
在Table操作时，我们也可以使用这种方式加以改进代码：
普通的方式：

$('#myTable td').click(function(){
    $(this).css('background', 'red');
});
改进方式：
$('#myTable').click(function(e) {

     var $clicked = $(e.target);

     $clicked.css('background', 'red');

});

假设有100个td，在使用普通的方式的时候，你绑定了100个事件。
在改进方式中，你只为一个元素绑定了1个事件，
至于是100个事件的效率高，还是1个事件的效率高，相信你也能自行分辨了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    PHP+jQuery实现双击修改table表格功能示例

    在本示例中，我们展示了如何使用PHP和jQuery来实现一个功能，允许用户双击table表格中的单元格进行编辑。这个功能通常用于数据管理界面，让用户能够快速更新表格中的信息。 首先，PHP部分用于创建一个二维数组`$con...

    jquery 编辑table实例

    本教程将深入探讨如何使用 jQuery 实现表格（table）的编辑功能，包括“一行编辑”和“双击编辑单元格”两种常见实例。 **一、一行编辑** 1. **创建HTML结构**：首先，我们需要一个基本的HTML表格结构，包含表头...

    jquery将table表格变成可编辑

    本文将深入探讨如何使用jQuery将一个普通的HTML表格（Table）转换为可编辑的表格，让用户可以直接在表格单元格（TD）内进行编辑。 首先，我们需要了解HTML表格的基本结构。HTML表格由`&lt;table&gt;`标签开始，内部包含`...

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    在Web开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。在这个问题中，我们将深入探讨如何利用jQuery来获取用户在table中点击时的行号和列号。这在实现交互式...

    php通过ajax实现双击table修改内容

    通过上述知识点的介绍，我们可以了解到，在使用PHP和Ajax实现双击表格单元格修改内容的功能时，需要考虑前端的交互设计、数据绑定、事件处理、后端的数据接收与处理以及前后端的数据交互等多个方面。这样才可以构建...

    jQuery 实现双击编辑表格功能

    这个简单的实现允许用户双击表格单元格进行编辑，提高用户在查看和修改数据时的交互体验。请注意，这个示例未包含错误处理和验证功能，实际项目中可能需要添加这些功能以确保数据的完整性和一致性。 总的来说，...

    jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    主要介绍了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法,涉及jQuery响应鼠标事件动态操作页面元素及基于get实现ajax交互保存数据的相关技巧,需要的朋友可以参考下

    table双击td修改内容

    table双击td修改内容。纯手工，纯前端无后端。可以应用后端，不过需要自己修改样式。白嫖党：https://blog.csdn.net/qq_38508172/article/details/82660950

    Layui组件Table绑定行点击事件和获取行数据的方法

    具体到代码实现，可以使用jQuery的on方法为table的tr元素绑定双击事件。当用户双击某一行时，会触发事件函数，此函数中可以获取到当前行的索引，即Index。然后通过这个索引，可以从数据集中获取到相应的行数据。 一...

    Jquery案例 之 双击编辑异步更新

    本案例“Jquery案例 之 双击编辑异步更新”主要探讨了如何利用jQuery实现表格或其他元素的双击编辑功能，并通过异步方式更新数据到服务器。以下是关于这个主题的详细知识讲解。 首先，我们需要了解双击编辑的基本...

    layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

    在本文中，我们将深入探讨如何使用layui table进行数据的新增、修改、删除和查询，以及如何通过双击获取行数据。 1. 表格数据的新增： layui table 提供了便利的方法来动态添加数据。在示例代码中，`addRowItem` ...

    jquery-1.7.1.min

    《jQuery EasyUI扩展实现表格双击编辑功能解析》 在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。EasyUI是基于jQuery的一个轻量级且强大的用户界面框架...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...

    jquery.table.sort.js-jquery表格排序插件

    摘要:脚本资源,jQuery,表格排序插件, jquery表格插件　jquery.table.sort.js-jquery表格排序插件，不管是双击表头的哪一个标题，数据都会按照点击的表头进行排序，以一个活动列表来演示如何为表格排序，这里请注意，...

    jQuery EasyUI的api

    - **初始化组件**: 使用`$(selector).pluginName(options)`的方式创建组件，如`$("#table").datagrid(options)`来创建一个数据网格。 - **选项（options）**: 创建组件时可以传递一系列配置参数，如宽度（width）...

    jquery表格树插件

    **jQuery表格树插件详解** 在网页开发中，表格数据的展示经常需要处理大量结构化的信息，而将这些数据组织成树形结构可以更清晰地展现层级关系，提高用户的浏览体验。`jQuery表格树插件`就是为此目的设计的工具，它...

    table增删改操作

    table表格的增删改功能，鼠标左键双击可编辑，下方按钮增加，右侧删除，表格数据计入localstorage，不会因刷新而消失

    jquery 操作表格

    4. **数据操作**：jQuery可以方便地获取或修改表格数据。例如，使用`.text()`获取单元格内容，然后使用`.html()`或`.text()`更新内容。 5. **动画效果**：jQuery的动画功能可以增强用户体验，如淡入淡出(`fadeIn()`...

Magicbox
Global site tag (gtag.js) - Google Analytics