<JQuery>双击编辑异步更新

最新推荐文章于 2024-08-09 06:13:01 发布

置顶 To_be_0909

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量2.3k

点赞数

分类专栏： Javascript/Jquery 文章标签： jquery function xhtml 微软 input html

本文链接：https://blog.csdn.net/To_be_0909/article/details/7832386

版权

Javascript/Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

刚刚看视频之后动手做的，实现比较简单，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
		$("tbody > tr:even").addClass("dan");	/*奇数行变色*/		
		$("tbody > tr > td").dblclick(function(){
			var inval = $(this).html();			//获取当前点击td内容
			var infd = $(this).attr("fd");		//获取当前点击td中的fd自定义属性值
			var inid = $(this).parents().attr("id");  //获取当前点击td父类tr的id
			//双击以后当前td变成输入框，id定义为edit"+infd+inid+"为了避免重复，value为原内容
			$(this).html("<input id='edit"+infd+inid+"'value='"+inval+"'>"); 
			//鼠标焦点失去后执行 
			$("#edit"+infd+inid).focus().live("blur",function(){
				var editval = $(this).val();	//获取更改内容
				$(this).parents("td").html(editval);  //将点击的td中原内容改为输入的新内容
				});
			});
	});
</script>
<style type="text/css">
table{
	width:400px;
	border:0;
	border-collapse:collapse;  /*边框会合并为一个单一的边框*/
	margin:auto;
}
th{
	font:bold 18px "微软雅黑";
	text-align:center;
	padding:4px;
	border-bottom:1px solid #000;
}
td{
	font:normal 18px "微软雅黑";
	text-align:center;
	padding:2px;
	border-bottom:1px solid #000;
}
.dan{
	background:#F33;
	color:#FFF;
}
</style>
</head>

<body>
<table>
	<thead>
    	<tr>
        	<th>时间</th><th>地点</th><th>人物</th>
        </tr>
    </thead>
    <tbody>
    	<tr id="1">
            <td fd="d">5月01日</td><td fd="a">北京</td><td fd="n">小张</td>
        </tr>
        <tr id="2">
            <td fd="d">4月03日</td><td fd="a">上海</td><td fd="n">王洋</td>
        </tr>
        <tr id="3">
            <td fd="d">7月16日</td><td fd="a">天津</td><td fd="n">婉玉</td>
        </tr>
        <tr id="4">
            <td fd="d">3月22日</td><td fd="a">济南</td><td fd="n">张协</td>
        </tr>
        <tr id="5">
            <td fd="d">6月08日</td><td fd="a">杭州</td><td fd="n">刘顺</td>
        </tr>
    </tbody>
</table>
</body>
</html>

To_be_0909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<JQuery>双击编辑异步更新

刚刚看视频之后动手做的，实现比较简单，具体代码如下：无标题文档 $(document).ready(function(){ $("tbody > tr:even").addClass("dan"); /*奇数行变色*/ $("tbody > tr > td").dblclick(function(){ var inval = $(this).html();
复制链接

扫一扫

专栏目录