jQuery实现可修改表格

最新推荐文章于 2023-03-28 14:24:57 发布

kai_Childe

最新推荐文章于 2023-03-28 14:24:57 发布

阅读量303

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/skaihzx/article/details/112438814

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.11.3.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .tab{
                margin: 0 auto;
                width: 800px;
                border: 1px solid #34495e;
                border-collapse: collapse;
            }
            th,td{
                height: 30px;
                width: 180px;
                border: 1px solid #34495e;
                box-sizing: border-box;
            }
            tr:nth-child(1){
                background: #34495e;
                color: #eee;
            }
        </style>
    </head>
    <body>
        <table class="tab">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
            </tr>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>18</td>
                <td>软件工程</td>
            </tr>
            <tr>
                <td>002</td>
                <td>张三</td>
                <td>18</td>
                <td>软件工程</td>
            </tr>
            <tr>
                <td>003</td>
                <td>张三</td>
                <td>18</td>
                <td>软件工程</td>
            </tr>
            <tr>
                <td>004</td>
                <td>张三</td>
                <td>18</td>
                <td>软件工程</td>
            </tr>
        </table>

        <script>
            $(function (){
                $('.tab tr:not(:first-child)>td').click(function (){
                    let td = $(this);
                    let txt = td.text();
                    td.text('');
                    let input = $('<input type="text">');
                    input.val(txt)
                         .css({
                             "width":"100%",
                             "height":"100%",
                             "border":"0",
                             "outline":"0",
                             "padding":"0 5px"
                         })
                    input.on('click',false);
                    td.append(input);
                    input.focus().select();

                    input.on('blur',function (){
                        if (window.confirm('是否确认修改？')){
                            td.text($(this).val());
                        } else {
                            td.text(txt);
                        }
                        $(this).remove();
                    })
                })
            })
        </script>
    </body>
</html>

kai_Childe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现可修改表格

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-1.11.3.js"></script> <style> *{
复制链接

扫一扫