在表格(td)标签中或div中点击编辑按钮，在原来的位置显示出input输入框进行编辑操作(或者让标签变成可编辑内容)

笑到世界都狼狈

已于 2022-11-14 19:44:47 修改

阅读量4.7k

点赞数 10

分类专栏： js/jq 文章标签： td/div编辑在原来位置弹出input输入框编辑 input js/jq div/span标签变成可编辑里面的内容

于 2019-07-23 19:55:37 首次发布

js/jq 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

这两天项目刚上线，新版本的需求项目部还没搞出来，瞄了一眼需求中有个待定的原型图是点击编辑的时候在原来位置出来input输入框进行编辑，刚好这个功能我没做过，我百度百度写了几个demo，这样要是到时候真的要做这个需求，直接复制粘贴就好了

1.首先，第一种效果是编辑写在一个单独的td中，点击编辑，表格的一整行都显示input标签，也有一种是点击编辑，只有编辑前一个兄弟显示input标签。

效果如图所示：

点击编辑td一整行都显示input

点击编辑，只有编辑的前一个兄弟显示input

两种需求的代码在下面有注释，可以根据自己需求选择

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不在一个td标签中点击编辑出现输入框</title>
    <style type="text/css">
        th{height: 40px;line-height: 40px;}
        td{text-align: center;height: 30px;line-height: 30px;}
        td>a{margin-left: 10px;text-decoration: none;color:#2e88f8;}
     </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="600px">
      <thead>
        <tr>
          <th>设备名称</th>
          <th>ip地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>LENOVO_PC</td>
          <td>192.168.0.1</td>
          <td><a href="#" class="edit">编辑</a></td>
        </tr>

         <tr>
          <td>LENOVO_PC</td>
          <td>192.168.0.1</td>
          <td><a href="#" class="edit">编辑</a></td>
        </tr>
      </tbody>
    </table>
    <script type="text/javascript">
        // 点击编辑，他的前一个兄弟会出现input输入框
        // $(".edit").click(function(){
        //     var ed = $(this).parent().prev().html("<input type='text' value='"+$(this).parent().prev().text()+"'/>").find('input').focus().blur(function(){    
        //         // 失去焦点的时候移除input输入框
        //         $(this).parent().removeClass('input').html($(this).val() || 0);    
        //     });
        // });

        // 点击编辑，一整行，除编辑外都会出现input输入框
        $(".edit").click(function(){
            var t_this = $(this);
            var list=$(t_this).parent().parent().find("td:lt(2)");
            $.each(list,function(i,obj){
                $(obj).html("<input type='text' value='"+$(obj).text()+"'/>");
            });
        });
    </script>
</body>
</html>

2.第二种效果是编辑按钮和和要编辑的内容在一个td中，点击编辑时修改

效果如下：

编辑和修改内容在一个td中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在一个td标签中点击编辑出现input输入框</title>
    <style type="text/css">
        th{height: 40px;line-height: 40px;}
        td{text-align: center;height: 30px;line-height: 30px;}
        td>a{margin-left: 10px;text-decoration: none;color:#2e88f8;}
     </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="600px">
      <thead>
        <tr>
          <th>设备名称</th>
          <th>ip地址</th>
          <th>使用人</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>LENOVO_PC</span></td>
          <td><span>192.168.0.1</span></td>
          <td><span>哈哈哈</span><a href="#">[编辑]</a> </td>
        </tr>

        <tr>
          <td><span>LENOVO_PC</span></td>
          <td><span>192.168.0.1</span><a href="#">[编辑]</a></td>
          <td><span>小菜鸟</span></td>
        </tr>
      </tbody>
    </table>
    <script>
        $(function(){           
            $('table td a').click(function(){    
                if(!$(this).is('.input')){    
                    $(this).parent().find('span').addClass('input').html('<input type="text" value="'+ $(this).parent().find('span').text() +'" />').find('input').focus().blur(function(){
                    /*
                    //ajax将修改后的数据提交到后台
                    $.ajax({    
                     type: 'POST',    
                     url: 'edit...',    
                     data: ""    
                    });  
                    */
                    // 失去焦点的时候移除input输入框
                    $(this).parent().removeClass('input').html($(this).val() || 0);    

                  });                        
                }    
            }).hover(function(){    
                $(this).addClass('hover');    
            },function(){    
                $(this).removeClass('hover');    
            });    
        });
    </script>
</body>
</html>

3.如果不是表格，是div，写法也差不多

效果如下：

div里面编辑弹出input

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>针对div做的操作</title>
  <style type="text/css">
    .clear_fix{clear: both;display:block;content: "";}
    .content{width:800px;margin: 100px auto;}
    .content>div{width:35%;float: left;height: 40px;line-height: 40px;}
    .content>div:nth-child(2n-1){width: 15%;}
    /*.content>div:net-child(2n-1){width: 20%;}
    .content>div:net-child(2n){width: 30%;}*/
    /*.content>div:nth-child(2n){padding-left: 20px;}*/
    .content>div>a{margin-left: 10px;text-decoration: none;color:#2e88f8;}
  </style>
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
  <div class="content clear_fix">
    <div>设备名称:</div>
    <div><span>LENOVO_PC</span><a href="#">[编辑]</a></div>
    <div>设备ip:</div>
    <div><span>192.168.0.1</span><a href="#">[编辑]</a></div>
    <div>使用人:</div>
    <div><span>哈哈哈</span><a href="#">[编辑]</a></div>
    <div>所属部门:</div>
    <div><span>研发部</span><a href="#">[编辑]</a></div>
  </div>
 
  <script>
    $(function(){           
      $('.content>div>a').click(function(){    
        if(!$(this).is('.input')){    
          $(this).parent().find('span').addClass('input').html('<input type="text" value="'+ $(this).parent().find('span').text() +'" />').find('input').focus().blur(function(){
          /*
          //ajax将修改后的数据提交到后台
          $.ajax({    
           type: 'POST',    
           url: 'edit...',    
           data: ""    
          });  
          */
          // 失去焦点的时候移除input输入框
          $(this).parent().removeClass('input').html($(this).val() || 0);    

          });                        
        }    
      }).hover(function(){    
        $(this).addClass('hover');    
      },function(){    
        $(this).removeClass('hover');    
      });    
    });
  </script>
</body>
</html>

最后还有一种简单的方法，就是给标签添加一个属性contenteditable=”true”就可以了。

其实代码差不多都一样，根据自己不同的需求进行修好就好了。

笑到世界都狼狈

关注

10
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
在表格(td)标签中或div中点击编辑按钮，在原来的位置显示出input输入框进行编辑操作(或者让标签变成可编辑内容)

这两天项目刚上线，新版本的需求项目部还没搞出来，瞄了一眼需求中有个待定的原型图是点击编辑的时候在原来位置出来input输入框进行编辑，刚好这个功能我没做过，我百度百度写了几个demo，这样要是到时候真的要做这个需求，直接复制粘贴就好了1.首先，第一种效果是编辑写在一个单独的td中，点击编辑，表格的一整行都显示input标签，也有一种是点击编辑，只有编辑前一个兄弟显示input标签。效果如图...
复制链接

扫一扫

专栏目录