使用jQuery和Pure.CSS创建一个可编辑的表格

阅读更多

使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素。在本教程中，我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格。

 

如果想看教程演示的话，请点击这里查看。

 

开始

你要做的第一件事情是，在你的服务器或本地硬盘上创建一个index.html文件。粘贴以下基本代码到新创建的文档中，然后保存。

    
        
        
        
    
    
        
Editable table example
    

 

现在我们需要获取我们将要在此教程中使用的免费工具。第一个是Pure.CSS。这是一个非常轻巧的CSS框架，极为适合小型项目。但是你不需要下载，因为从雅虎服务器可以直接链接。因此，你只需要粘贴以下代码到刚创建的index.html文件的部分：

 

我们要使用第二个工具是一个简单又甜蜜的名为editableTableWidget的jQuery插件。在这里下载.js文件并拖放到你的web服务器或本地硬盘驱动上，并且和你创建的index.html文件在同一个目录下。

都ok了？好的，让我们捣鼓一下这些漂亮的工具吧。

 

HTML

因为我们要创建一个可编辑的表格，所以现在我们做的事情自然是……创建一个HTML表格了。下面是一个我们将在这个教程中使用的HTML表格。代码需要粘贴到index.html文件的部分：

    

        

            
#
            
Make
            
Model
            
Year
        
    
     

         

             
1
             
Honda
             
Accord
             
2009
         
         

             
2
             
Toyota
             
Camry
             
2012
         
         

             
3
             
Hyundai
             
Elantra
             
2010
         
    

 

看看你的index.html文件：感谢Pure.CSS，使得我们基本表格看起来优雅又专业。如果你想要知道更多Pure.CSS能对HTML表格做的事情，那么请查看相关文档。

 

添加jQuery

我们的表格看起来不错，但它仍然是静态的。感谢jQuery和editableTableWidget插件，我们可以让表格变得可编辑。

 

要做的第一件事是链接到jQuery，因为我们要使用的插件依赖于它。你既可以使用你自己的jQuery副本，也可以Google CDN链接，像我下面展示的那样。我们还需要链接到我们前面下载的mindmup-editabletable.js文件。

 

将下面的代码插入到你的 index.html 文件中，就在结束的标签上面。

 

这样做好了之后，你还需要如下所示使得HTML表格可编辑。代码直接放在你刚刚添加的脚本下面。

 

完工。看看你创造了什么：该表格现在是可编辑的了。

 

更进一步

现在，我们已经有了一个全功能的可编辑的表格，何不更进一步，使之更佳？第一件事是要确定特定单元格是不能被编辑的。这不是什么大工程，只需要添加一个类到任意元素中即可：

...

 

然后，使用下面的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创建一个可编辑的表格