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

天梯梦

浏览: 13741059 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript /Jquery / Bootstrap / Web

使用开源组件真的可以容易又快速地为网站和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创建一个可编辑的表格

分享到：

2016十大优秀jQuery插件推荐 | jQuery .tmpl() 用法

2016-08-26 02:24
浏览 1242
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论