Hướng dẫn tạo chức năng Editable với JQuery và PureCSS

Xem: 363    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 1 đánh giá ) File đã được kiểm thử


Bằng cách sử dụng những component mở rộng có sẵn trên internet, chúng ta hoàn toàn có thể tạo những chức năng cực cool cho website cũng như ứng dụng web. Trong bài viết này, mình sẽ chia sẻ cho các bạn một chức năng tùy chỉnh bảng dữ liệu trực tiếp bằng cách sử dụng PureCSS và jQuery.

HTML

Các bạn tạo bảng dữ liệu với khung chuẩn html như sau :


 
    <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 class="uneditable">2010</td>
        </tr>
    </tbody>
</table>

Bên trong thẻ <head> các bạn chèn thêm đoạn khai báo của PureCSS.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

JQuery

Cuối cùng là chèn thêm thư viện jQuery và đoạn code bên dưới là được.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src="mindmup-editabletable.js"></script>
<script>
    $('#editable').editableTableWidget();
    $('#editable td.uneditable').on('change', function(evt, newValue) {
        return false;
    });
 
$('#editable td').on('change', function(evt, newValue) {
    $.post( "script.php", { value: newValue })
        .done(function( data ) {
                alert( "Data Loaded: " + data );
        }); 
    ;
});
</script>

Chúc các bạn thành công !

Hướng dẫn tạo chức năng Editable với JQuery và PureCSS

Hướng dẫn tạo chức năng Editable với JQuery và PureCSS Đăng ngày 04-10-2016  Bằng cách sử dụng những component mở rộng có sẵn trên internet, chúng ta hoàn toàn có thể tạo những chức năng cực cool cho website cũng như ứng dụng web. 9/10 363

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn