前段时间做项目用到了可以编辑的表格,本篇博客主要是简单总结jQuery部分实现可以编辑的表格,没有与数据库的交互部分,下篇博客会详细解说AJax部分。
首先是准备表格,样式自定,例子中我用了表格很简单的样式。
html
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <link href="editTable.css" rel="stylesheet" />
- <script src="jquery.js" type="text/javascript"></script>
- <script src="editTable.js" type="text/javascript"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <table>
- <tr>
- <th>艺术家</th>
- <th>所在职</th>
- </tr>
- <tr>
- <td>青峯</td>
- <td>主唱</td>
- </tr>
- <tr >
- <td>馨仪</td>
- <td>贝斯</td>
- </tr>
- <tr >
- <td>家凯</td>
- <td>吉他</td>
- </tr>
- <tr >
- <td >阿福</td>
- <td>木吉他</td>
- </tr>
- <tr>
- <td >阿龚</td>
- <td>键盘</td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>
样式表
- body {
- /*无边距*/
- margin:0px;
- padding:0px;
- /*字体大小*/
- font-size:16px;
- }
- /*表格样式*/
- table,tr,td,th {
- border:1px solid #A3A3A3;
- border-collapse:collapse;
- background-color:#E4E4E4;
- }
- td {
- width:200px;
- height:30px;
- text-align:center;
- }
js文件
- $(function () {
- //找到所有名字的单元格
- var name = $("tbody td:even");
- //给这些单元格注册鼠标点击事件
- name.click(function () {
- //找到当前鼠标单击的td
- var tdObj = $(this);
- //保存原来的文本
- var oldText = $(this).text();
- //创建一个文本框
- var inputObj = $("<input type='text' value='" + oldText + "'/>");
- //去掉文本框的边框
- inputObj.css("border-width", 0);
- inputObj.click(function () {
- return false;
- });
- //使文本框的宽度和td的宽度相同
- inputObj.width(tdObj.width());
- inputObj.height(tdObj.height());
- //去掉文本框的外边距
- inputObj.css("margin", 0);
- inputObj.css("padding", 0);
- inputObj.css("text-align", "center");
- inputObj.css("font-size", "16px");
- inputObj.css("background-color", tdObj.css("background-color"));
- //把文本框放到td中
- tdObj.html(inputObj);
- //文本框失去焦点的时候变为文本
- inputObj.blur(function () {
- var newText = $(this).val();
- tdObj.html(newText);
- });
- //全选
- inputObj.trigger("focus").trigger("select");
- });
- });
页面效果:
单击艺术家列,就可以对表格进行修改。
单击其他地方进行了修改
以上主要是利用JQuery进行基础的效果演示