一、效果 二、代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/>…
August 15, 2016
使用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创建一个可编辑的表格
PHP / JavaScript countries array, US states array
jquery 条件搜索 VisualSearch Autocomplete
Picturefill.WP – 根据屏幕尺寸加载合适的图片
About Author
