- <!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>
Jquery即点即改简单小案例
最新推荐文章于 2018-03-23 17:56:38 发布