04/10/2018, 20:17
Tạo chức năng Editable với jQuery và PureCSS
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. Xem ...
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.
Xem Demo | Download
HTML
Các bạn tạo bảng dữ liệu với khung chuẩn html như sau :
<h1>Editable table example</h1>
<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 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 !
Chuyên Mục: Javascript
Bài viết được đăng bởi webmaster
