Tất cả bài viết | Bootstrap
Cách tạo bảng mở rộng bằng Bootstrap
Trong bài học thiết kế website chuyên nghiệp này các Bạn sẽ được hướng dẫn cách tạo bảng mở rộng bằng Bootstrap
Bước 1: Tạo cấu trúc HTML
Cách tạo bảng mở rộng bằng Bootstrap
Khóa học Học phí Khuyến mãi Thời gian Chuyên viên website lành nghề Online 3.200.000 VND 1.990.000 VND (Giảm 38%) 8 tháng Thông tin thêm về khóa học
Lập trình PHP Cơ Bản Online 1.000.000 VND 700.000 VND (Giảm 30%) 4 tháng Thông tin thêm về khóa học
Thiết kế giao diện website Online 1.800.000 VND 1.000.000 VND (Giảm 44%) 4 tháng Thông tin thêm về khóa học
Lập trình HTML5, CSS3, RWD, Javascript, Bootstrap Online 1.200.000 VND 700.000 VND (Giảm 42%) 4 tháng Thông tin thêm về khóa học
Bước 2: Định dạng CSS
table.table-expandable >
tbody > tr:nth-child(odd) {
cursor: pointer;
}
table.table-expandable.table-hover > tbody > tr:nth-child(even):hover td {
background-color: white;
}
table.table-expandable > tbody > tr div.table-expandable-arrow {
background:transparent url(http://hocwebgiare.com/thiet_ke_web_chuan_demo/bootstrap_table_expand/images/arrows.png) no-repeat scroll 0px -16px;
width:16px;
height:16px;
display:block;
}
table.table-expandable > tbody > tr div.table-expandable-arrow.up {
background-position:0px 0px;
}
Bước 3: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bước 5: Tạo hiệu ứng cho Table bằng JQUERY
(function ($) {
$(function () {
$('.table-expandable').each(function () {
var table = $(this);
table.children('thead').children('tr').append('');
table.children('tbody').children('tr').filter(':odd').hide();
table.children('tbody').children('tr').filter(':even').click(function () {
var element = $(this);
element.next('tr').toggle('slow');
element.find(".table-expandable-arrow").toggleClass("up");
});
table.children('tbody').children('tr').filter(':even').each(function () {
var element = $(this);
element.append('
');
});
});
});
})(jQuery);
Bootstrap Xem (3670) Học thiết kế web giá rẻ
