jQuery实现可编辑表格

原创

wx62eb7326068f3 2023-02-20 10:30:43 博主文章分类：前端学习笔记 ©著作权

文章标签 可编辑表格 jQuery jquery html 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者wx62eb7326068f3的原创作品，请联系作者获取转载授权，否则将追究法律责任

可编辑表格，这个东西听起来挺高大上，其实用jQuery来实现，了解一下思路，就很简单

1.事实上是编辑td里面的内容，所以给他一个双击事件

2.双击完了这个td将其变为一个input，里面的值还保留着

3.最后就是失去焦点的时候还原，就欧克了

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <!-- 实现可编辑表格 -->
  <script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
  <script type="text/javascript">
    $(function(){
      /* 给表格里面每一个td添加一个dblclick事件 */
      $("td").dblclick(function(){
        /* 1.先拿到这个td原来的值，然后将这个td变成一个input:text,并且原来的值不动 */
        var tdVal = $(this).text();
        var oInput = $("<input type='text' value='"+tdVal+"'/>");
          $(this).html(oInput);
          oInput.focus();
        
        /* 2.失去焦点，这个td变为原来的text，value为修改过后的value */
        oInput.blur(function(){
          oInput.parent().html(oInput.val());
        });
      });
    });
  </script>
</head>
<body>
  <table id="tab">
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
  </table>
</body>
<style type="text/css">
  table{
    border: 1px solid blue;
    width:300px;
    border-collapse: collapse;
  }
  td,th{
    border: 1px solid blue;
    padding:3px;
  }
</style>
</html>