创建表格

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

瘦小的花卷

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

阅读量265

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Liu_Ma/article/details/112138158

版权

题目

完成一个可编辑的表格

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>softeem</td>
        <td>12</td>
        <td>软件工程</td>
    </tr>
    <tr>
        <td>002</td>
        <td>狗蛋</td>
        <td>18</td>
        <td>软件工程</td>
    </tr>
    <tr>
        <td>003</td>
        <td>来福</td>
        <td>16</td>
        <td>挖掘机工程</td>
    </tr>
</table>

<script src="js/jquery-1.11.3.js"></script>
<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
                // .width(td.width())
                // .height(td.height())
                .val(txt)
                // .css('border','none')
                .css({
                    "width":"100%",
                    "height":"100%",
                    "border":"0",
                    "outline":"0",
                    "padding":"0 5px"
                });
            console.log(input)
            //阻止再次发生点击事件
            // td.off('click');
            //阻止输入框的点击事件传播
            input.on('click',false);
            //添加input节点到td中
            td.append(input);
            //当元素插入到指定位置之后，聚焦以及选中
            input.focus().select();

            //为输入框绑定失去焦点事件
            input.on('blur',function () {
                if (window.confirm('是否确认修改？')) {
                    td.text($(this).val());
                }else {
                    td.text(txt);
                }
                td.on('click');
                $(this).remove();
            })
        })
    })
</script>
</body>
</html>

运行结果

在这里插入图片描述

总结

主要在于表格中的text文本和输入框input之间的关系。给所有需要编辑的单元格设置点击事件。点击后会创建一个输入框input对象，再给输入框设置一个失焦事件，及当输入完毕后鼠标点击他处触发的事件。事件为在表格插入文本，并移除输入框。

瘦小的花卷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建表格

题目完成一个可编辑的表格代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .tab{
复制链接

扫一扫