JQuery制作可以编辑table

最新推荐文章于 2024-10-12 07:46:51 发布

原创最新推荐文章于 2024-10-12 07:46:51 发布 · 934 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #table #function #stylesheet #border #input

JQUERY开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个可编辑表格的实现过程，包括隔行变色、点击单元格编辑内容及通过回车或ESC键保存或还原的功能。使用了HTML、CSS和jQuery。

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

目标计划:

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);
}
});
});
});