jQuery小试之可编辑表格

最新推荐文章于 2019-07-02 14:25:52 发布

「已注销」

最新推荐文章于 2019-07-02 14:25:52 发布

阅读量1.6k

点赞数 10

本文链接：https://blog.csdn.net/lidatgb/article/details/7752347

版权

这个在牛腩的新闻发布系统中就遇到过，只是当时还没学jQuery、javascript等知识，在此重新做一个可以编辑的表格：单击即可编辑，离开即保存单元格内容，回车键可以保存，Esc可以退出保存。

前台界面：

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <meta http-equiv="Content-Type" content ="text/html;charset=UTF-8" />
        <link type="text/css" rel="Stylesheet"  href="css/editTable.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/editTable.js"></script>
        <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table >
        <thead>
                <tr>
                        <td colspan ="2">
                        点击即可编辑内容
                        </td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th> 姓名</th>
                        <th>学号</th>
                </tr>
                <tr>
                        <td>090501</td>
                         <td>lida</td>
                </tr>
                <tr>
                        <td>090502</td>
                         <td>yangzhe</td>
                </tr>
                <tr>
                        <td>090503</td>
                         <td>hanhao</td>
                </tr>
                <tr>
                        <td>090504</td>
                         <td>hefei</td>
                </tr>
                <tr>
                         <td colspan ="2">汇总</td>
                </tr>
        </tbody>
    </table>
    </div>
    </form>
</body>
</html>

CSS：

body {
}
table,table td,table th
{
        /*单元格宽度为1、直线、黑色*/
        border:1px solid black;
        /*单元格边框合并*/
        border-collapse :collapse;
        width :300px;
        text-align:center ;
        }
table th
{
        /*表头颜色*/
        background-color:#a3bae9;
        }

javascript代码：

//简化的ready写法
$(function () {
        //找到表格的内容区域中所有的奇数行，并设置样式
        $("tbody tr:even").css("background-color", "#ECE9D8");
        //我们需要找到所有的学号单元格
        var numTd = $("tbody td:even");
        //鼠标点击的事件
        numTd.click(function () {
                //找到当前鼠标点击的td
                var tdObj = $(this);
                //解决firefox中出现html代码问题
                if (tdObj.children("input").length > 0) {
                        //当前td中input，不执行click处理
                        return false;
                    }
                //获取原内容
                var text = tdObj.html();
                //清空td中的内容
                tdObj.html("");
                //创建一个文本框，去掉文本框的边框，设置样式
                //需要将当前td中的内容放到文本框中
                //将文本框插入到td中
                var inputObj = $("<input type='text'>").css("border-width", "0")
			.css("font-size", "16px").width(tdObj.width())
			.css("background-color", tdObj.css("background-color"))
			.val(text).appendTo(tdObj);
                //是文本框插入之后就被选中
                inputObj.trigger("focus").trigger("select");
                inputObj.click(function () {
                        return false;
                });
                //处理回车和ESC的操作
                inputObj.keyup(function (event) {
                        //获取当前按下键盘的键值
                        var keycode = event.which;
                        //处理回车的情况
                        if (keycode == 13) {
                                //获取当当前文本框中的内容
                                var inputtext = $(this).val();
                                //将td的内容修改成文本框中的内容
                                tdObj.html(inputtext);
                        }
                        //处理ESC的情况
                        if (keycode == 27) {
                                //将td中的内容还原成原内容
                                tdObj.html(text);
                        }
                });
        });
});

运行结果：

通过多次修改表格内置文本框的CSS达到点击即可修改的效果，通过event.which获取当前按键，通过简单的知识合理搭配出丰富的效果，这是本例的主要内容。如果哪里有误或是可以优化，欢迎交流。

「已注销」

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
19
评论
jQuery小试之可编辑表格

这个在牛腩的新闻发布系统中就遇到过，只是当时还没学jQuery、javascript等知识，在此重新做一个可以编辑的表格：单击即可编辑，离开即保存单元格内容，回车键可以保存，Esc可以退出保存。前台界面： HTML代码：
复制链接

扫一扫