Chính sáchBảng giáThanh toánLiên hệFeedback

Lấy dữ liệu từ Google Sheet lên blogspot

Zalo 0971539681 Tư vấn & Hỗ trợ
Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!
Bài này mình hướng dẫn các bạn chi tiết cách Lấy dữ liệu từ Google Sheet lên blogspot đơn giản nhất, chúng ta có thể truy xuất dữ liệu từ Googl Sheet lên trang blogspot hoặc trang web.

Lấy dữ liệu từ Google Sheet (Google Trang tính) lên blogspot


Đầu tiên các bạn truy cập Google Trang tính tạo một bảng tính mới, tạo tiêu đề cột bằng tiếng Anh không dấu.

Lấy dữ liệu từ Google Sheet lên blogspot


Tiếp theo bạn chọn Tệp - Xuất bản lên web - Đường liên kết và nhấn Xuất bản xong đóng lại.
Tiếp theo bạn chọn Chia sẻ - Đặt tên cho Trang tính và nhấn Lưu

Lấy dữ liệu từ Google Sheet lên blogspot


Tiếp theo bạn chọn Chia sẻ với bất kỳ ai có đường liên kết.

Lấy dữ liệu từ Google Sheet lên blogspot


Và đây chính là cái Link chúng ta cần lấy, các bạn copy link trên thế vô link trong đoạn code bên dưới.


<table id='customers'>
  <thead>
    <th>STT</th>
    <th>Họ tên</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Address</th>
  </thead>
</table>

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'/>
<script>
  //<![CDATA[
  // link google sheet
  var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/14-HqpQSldX9lLw5cc65Zu4QEq8Xz5-SleIihd_qDuNw/edit?usp=sharing';

  function init() {
    Tabletop.init({
      key: publicSpreadsheetUrl,
      callback: showInfo,
      simpleSheet: true
    })
  }

  function showInfo(data, tabletop) {
    for (var i = 0; i < data.length; i++) {
      var name = data[i].Name;
      var email = data[i].Email;
      var phone = data[i].Phone;
      var address = data[i].Address;
      var html = '<tbody><tr><td></td> <td>' + name + '</td> <td>' + email + '</td><td>' + phone + '</td><td>' + address + '</td> </tr></tbody>';
      $('#customers').append(html);
    }
  }
  window.addEventListener('DOMContentLoaded', init)
  //]]>
</script>

Xong bạn copy toàn bộ code trên dán trước thẻ </body> và lưu lại, lưu ý code trên có sử dụng thư viện jQuery, copy dán dưới <head> nếu template của bạn chưa có.


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

Thêm một chút CSS cho table


table{counter-reset:rowNumber}
table tbody tr{counter-increment:rowNumber}
table#customers tbody tr td:first-child::before{content:counter(rowNumber);min-width:1em;margin-right:0.5em}
#customers{font-family:Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}
#customers td,#customers th{border:1px solid #ddd;padding:8px}
#customers tr:nth-child(even){background-color:#f2f2f2}
#customers tr:hover{background-color:#ddd}
#customers th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#04AA6D;color:white}

Tags:

Nhận xét

Đăng nhận xét

Có 8 nhận xét
Hiển thị

Mẫu tiếp thị liên kết

Xem thêm
Contact Me on Zalo