文本点击变输入框

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
    <style>
        td,th {
            text-align: center;
            width: 100px;
        }
    </style>
    <script>
        $(function () {

           $("td").on("dblclick",function (e) {
               var val = $(this).text();
               $(this).html("<input type='text' style='width:100%;'>");
               $(this).find("input").val(""+val+"").focus();
               $("input:focus").blur(function () {
                   //当获得焦点的输入框失去焦点时  用此输入框中的值替代输入框
                   console.log(1);
                   var val = $(this).val();
                   $(this).parent().html(""+val+"");
               });
           });

        });
    </script>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>

 

posted on 2018-01-17 20:36  huozaimengli  阅读(314)  评论(0)    收藏  举报

导航