jQuery 即点即改

最新推荐文章于 2021-11-26 11:09:21 发布

亢士群的blog

最新推荐文章于 2021-11-26 11:09:21 发布

阅读量1.5k

点赞数

分类专栏： Jquery ajax PHP 文章标签： php ajax jquery 即点即改

本文链接：https://blog.csdn.net/qq_35278280/article/details/51923406

版权

PHP 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

ajax

9 篇文章 0 订阅

订阅专栏

Jquery

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>即点即改</title>
</head>
<style type="text/css">
    td{
        width: 200px;
    }
</style>
<body>
    <table border="1">
        <tr height="50px">
            <th>ID</th>
            <th>name</th>
            <th>vales</th>
        </tr>
        <tr height="50px">
            <td>1</td>
            <td><span class="click">张三</span></td>
            <td>人</td>
        </tr>
        <tr height="50px">
            <td>2</td>
            <td><span class="click">张三</span></td>
            <td>生</td>
        </tr>
        <tr height="50px">
            <td>2</td>
            <td><span class="click">张三</span></td>
            <td>生</td>
        </tr>
    </table>
    <script src="jq.js"></script>   //引用jQuery库类
    <script type="text/javascript">
        $(document).on("click", ".click", function () {
            var con = $(this).html();
            $(this).parent().html("<input type=\"text\" value=" + con + " />");
            $("input").focus();
            $(document).on("blur", "input", function () {
                var a = $("input").val();
                $(this).parent().html("<span class=\"click\">" + a + "</span>");
            });
        });
    </script>
</body>
</html>