使用jQuery和Pure.CSS建立一個可編輯的表格

2016-07-03    分類：WEB開發、程式設計開發、首頁精華0人評論發表於2016-07-03
jQueryCSS

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

使用開源元件真的可以容易又快速地為網站和app構建強大的前端元素。在本教程中，我會告訴你如何使用PureCSS和jQuery輕鬆地建立可編輯的表格。

如果想看教程演示的話，請點選這裡檢視。

jquery-purecss-edit-table

開始

你要做的第一件事情是，在你的伺服器或本地硬碟上建立一個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
翻譯作者：碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章