浏览 11781 次
|
锁定老帖子 主题：(JQuery)双击修改table里面的值
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-12-08
最后修改：2009-12-08
上一篇写的是用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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：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个事件的效率高，相信你也能自行分辨了。 |
| 返回顶楼 | |
|
发表时间：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呢，点击其他就不触发。 |
| 返回顶楼 | |
|
发表时间：2009-12-15
对event对象的target(or srcElement)做个判断就行了。总之whiletrue的观点是很正确的。
|
| 返回顶楼 | |
|
发表时间：2010-01-20
最后修改：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>
|
| 返回顶楼 | |
