JQuery制作可以编辑table

最新推荐文章于 2024-06-10 09:52:35 发布

wdfscp

最新推荐文章于 2024-06-10 09:52:35 发布

阅读量884

点赞数

分类专栏： JQUERY开发文章标签： jquery table function stylesheet border input

本文链接：https://blog.csdn.net/wdfscp/article/details/7928806

版权

JQUERY开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文是看网上视频教程后而写的,现在分项给大家.

目标计划:

table隔行变色
点击table中的单元格可以进行编辑里面的内容
按回车键可以保存编辑后的内容
按ESC键可以还原单元格内容

1\建立解决方案,里面需要的目录结构如下:

最主要的文件是:tableEdit.css jquery-1.4.1.min.js tableEdit.js tableEidt.aspx.

2\画表格table

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/tableEdit.js" type="text/javascript"></script>
    <link href="CSS/tableEdit.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <thead>
                <tr>
                    <th colspan="2">
                        可以编辑的table
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>
                        学号
                    </th>
                    <th>
                        姓名
                    </th>
                </tr>
                <tr>
                    <td>
                        000001
                    </td>
                    <td>
                        张一
                    </td>
                </tr>
                <tr>
                    <td>
                        000002 
                    </td>
                    <td>
                       张二</td>
                </tr>
                <tr>
                    <td>
                        000003 
                    </td>
                    <td>
                        张三
                    </td>
                </tr>
                <tr>
                    <td>
                       000004</td>
                    <td>
                        张四
                    </td>
                </tr>
                <tr>
                    <td>
                        000005</td>
                    <td>
                        张五
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

3\设置表格的样式

代码如下:

table
{
    /*边框实线1像素*/
    border:1px  solid  black;
     /*取消单元格之间的间隔*/
    border-collapse:collapse;
    width:400px;
    }
table td
{
    border:1px solid black;
    width:50%;
    }
table th
{
    border:1px solid black;
    width:50%;
    }
table thead th
{
    background-color:Lime;
    }
 table tbody th
{
    background-color:Blue;
    }

4\编写tableEdit.js,这是核心部分

/**/
$(function () {
//设置隔行变色
//找到表格内容区域的除第一个tr外的所有的偶数行，
//table的行索引是从0开始的
//第一个tr已经在css中设置背景色了所以这不管怎么设置都不会变色，所以也不用除去第一个tr
$("tbody tr:even").css("background-color", "red");
//学号是可以编辑的
//获取所有学号td，table的列索引是从0开始的
var numTd = $("tbody td:even");
numTd.click(function () {
// //创建文本框
// var InPutObj = $("<input type='text'>");
// //获取当前单元格对象，this就是clik点击的单元格对象
// var tdObj = $(this);
// //设置文本框的边框
// InPutObj.css("border-width", "0");
// //设置文本框的字体大小
// InPutObj.css("font-size", "16px");
// //设置文本框的宽度和td的宽度一样
// InPutObj.width(tdObj.width());
// //设置文本框的背景色和td的一样
// InPutObj.css("background-color", tdObj.css("background-color"));
// //设置文本框的内容和td的一样
// InPutObj.val(tdObj.html().trim());
// //清空td中的内容
// tdObj.html("");
// //将文本框插入到td中
// InPutObj.appendTo(tdObj);


//精简代码
var tdObj = $(this);
//判断td中是否已经存在文本框，如果存在则停止td的click实践；
if (tdObj.children("input").length > 0) {
return false;
}
var text = tdObj.html().trim();
tdObj.html("");
var InputObj = $("<input type='text'>").css("border-width", "0")
.css("font-size", "16px")
.css("background-color", tdObj.css("background-color"))
.width(tdObj.width())
.val(text)
.appendTo(tdObj);
//是文本框插入之后就处于选中状态
InputObj.trigger("focus").trigger("select");
InputObj.click(function () {
return false;
});
//处理文本框上的回车和ESC按键的操做
InputObj.keyup(function (evert) {
var keycode = evert.which;
//回车
if (keycode == 13) {
//获取当前文本框的内容
var inputtext = $(this).val();
tdObj.html(inputtext);
}
//ESC
if (keycode == 27) {
tdObj.html(text);
}
});
});
});

wdfscp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery制作可以编辑table

本文是看网上视频教程后而写的,现在分项给大家.目标计划: table隔行变色点击table中的单元格可以进行编辑里面的内容按回车键可以保存编辑后的内容按ESC键可以还原单元格内容1\建立解决方案,里面需要的目录结构如下:最主要的文件是:tableEdit.css jquery-1.4.1.min.js tableEdit.js tableE
复制链接

扫一扫

专栏目录