jq实现可编辑表格

<!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>