一、效果 二、代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/>…
使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素。在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格。
如果想看教程演示的话,请点击这里查看。
开始
你要做的第一件事情是,在你的服务器或本地硬盘上创建一个index.html
文件。粘贴以下基本代码到新创建的文档中,然后保存。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Editable table</title> <style> body{ padding: 1% 3%; color: rgb(119, 119, 119); } h1{ color:#333 } </style> </head> <body> <h1>Editable table example</h1> </body> </html>
现在我们需要获取我们将要在此教程中使用的免费工具。第一个是Pure.CSS。这是一个非常轻巧的CSS框架,极为适合小型项目。但是你不需要下载,因为从雅虎服务器可以直接链接。因此,你只需要粘贴以下代码到刚创建的index.html
文件的<head>
部分:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
我们要使用第二个工具是一个简单又甜蜜的名为editableTableWidget的jQuery插件。在这里下载.js
文件并拖放到你的web服务器或本地硬盘驱动上,并且和你创建的index.html
文件在同一个目录下。
都ok了?好的,让我们捣鼓一下这些漂亮的工具吧。
HTML
因为我们要创建一个可编辑的表格,所以现在我们做的事情自然是……创建一个HTML表格了。下面是一个我们将在这个教程中使用的HTML表格。代码需要粘贴到index.html
文件的<body>部分:
<table id="editable" class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>Make</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Honda</td> <td>Accord</td> <td>2009</td> </tr> <tr> <td>2</td> <td>Toyota</td> <td>Camry</td> <td>2012</td> </tr> <tr> <td>3</td> <td>Hyundai</td> <td>Elantra</td> <td>2010</td> </tr> </tbody> </table>
看看你的index.html
文件:感谢Pure.CSS,使得我们基本表格看起来优雅又专业。如果你想要知道更多Pure.CSS能对HTML表格做的事情,那么请查看相关文档。
添加jQuery
我们的表格看起来不错,但它仍然是静态的。感谢jQuery和editableTableWidget插件,我们可以让表格变得可编辑。
要做的第一件事是链接到jQuery,因为我们要使用的插件依赖于它。你既可以使用你自己的jQuery副本,也可以Google CDN链接,像我下面展示的那样。我们还需要链接到我们前面下载的mindmup-editabletable.js
文件。
将下面的代码插入到你的 index.html
文件中,就在结束的</body>
标签上面。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="mindmup-editabletable.js"></script>
这样做好了之后,你还需要如下所示使得HTML表格可编辑。代码直接放在你刚刚添加的脚本下面。
<script> $('#editable').editableTableWidget(); </script>
完工。看看你创造了什么:该表格现在是可编辑的了。
更进一步
现在,我们已经有了一个全功能的可编辑的表格,何不更进一步,使之更佳?第一件事是要确定特定单元格是不能被编辑的。这不是什么大工程,只需要添加一个类到任意<td>
元素中即可:
<td class="uneditable">...</td>
然后,使用下面的JavaScript代码来检测不可编辑的单元格的变化,并阻止:
$('#editable td.uneditable').on('change', function(evt, newValue) { return false; });
如果你想要在演示中测试,那么可以尝试编辑表格右下角上面写着“2010”的单元格:你可以看到,该单元格的值是不可编辑的。
最后,如果你想要存储输入的值到数据库也可以。对此最简单的解决办法是使用jQuery和Ajax自动地发送值到PHP脚本,PHP脚本会处理数据并将其存储到数据库。
使用jQuery.post()方法,这实际上是小菜一碟。
$('#editable td').on('change', function(evt, newValue) { $.post( "script.php", { value: newValue }) .done(function( data ) { alert( "Data Loaded: " + data ); }); });
第1行中,我们使用事件侦听器来检查值有没有被用户更改。如果是的话,包含newValue
变量的.post()请求会发送到服务器上的PHP脚本(script.php
,不包括在本教程中)。
译文链接:http://www.codeceo.com/article/jquery-purecss-editable-table.html
英文原文:Create a Fancy Editable Table With jQuery and Pure.CSS
翻译作者:码农网 – 小峰
本文: 使用jQuery和Pure.CSS创建一个可编辑的表格