<JQuery>双击编辑异步更新

最新推荐文章于 2023-03-30 11:33:13 发布

jaray

最新推荐文章于 2023-03-30 11:33:13 发布

阅读量2.3k

点赞数

分类专栏： js

js 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="gbk">
<head>
<title>PHP100视频教程 jquery 双击编辑</title>
<style type="text/css">
table { border:0;border-collapse:collapse;}
td  { font:normal 12px/17px Arial;padding:2px;width:100px;}
th  { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan { background:#FC0} 
.ed { background:#669;color:#fff;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></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
            $(this).html("<input id='edit"+infd+inid+"'name='' value='"+inval+"'>");//双击以后当前td变成输入框，id定义为edit"+infd+inid+"为了避免重复，value为原内容
            //鼠标焦点失去后执行 
            $("#edit"+infd+inid).focus().live("blur",function(){
                var editval=$(this).val();//获取更改内容
                $(this).parents("td").html(editval); //将点击的td中原内容改为输入的新内容
               // $.post("post.php",{id:inid,fd:infd,val:editval});//修改数据提交post页面
            });
           
        });
  });
</script>
</head>
<body>
 <table>
  <thead>
   <tr><th>标题</th><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
   <tr id="1">
    <td fd="t">PHP100视频1</td><td fd="d">2011</td><td fd="a">上海</td></tr>
   <tr  id="2">
    <td fd="t">PHP100视频2</td><td fd="d">2012</td><td fd="a">杭州</td></tr>
   <tr  id="3">
    <td fd="t">PHP100视频3</td><td fd="d">2011</td><td fd="a">济南</td></tr>
   <tr  id="4">
    <td fd="t">PHP100视频4</td><td fd="d">2011</td><td fd="a">北京</td></tr>
  </tbody>
 </table>
</body>
</html>

jaray

关注

0
点赞
踩
1

收藏

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

PHP100视频教程 jquery 双击编辑table { border:0;border-collapse:collapse;}td { font:normal 12px/17px Arial;padding:2px;width:100px;}th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-botto
复制链接

扫一扫

专栏目录