Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tabletop.js範例程式</title>
    
    <!-- 利用Tabletop.JS讀取Google Sheet https://github.com/jsoma/tabletop -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <script type='text/javascript'> 
      // 於Google Spreadsheet建立的範例資料為 https://docs.google.com/spreadsheets/d/e/2PACX-1vR9LivzlVjV3Mp9EOw0rCh46tDacBY6uQ8AT4k6ObLecvL8P-BpgKza9IOyGfFkP3tEdNSereSt8wxT/pubhtml
      var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1vrt83CY6z8kFdF3e35ii7onEVCLwTJILHm-UJ_4-Pq4/pubhtml';
​
      function init() {
        Tabletop.init( { key: publicSpreadsheetUrl,
                         callback: showInfo,
                         simpleSheet: true } )
      }
​
      function showInfo(data, tabletop) {
        // alert('Successfully processed!')
        console.log(data);
        
        var str = "";
        for (var i=0; i<data.length; i++) {
            // 於Google Spreadsheet建立的範例資料A欄命名為name、B欄命名為telephone、c欄命名為lunchbox、d欄命名為order
            str += data[i].name + "(" +  data[i].telephone + ")" + " 訂 " +  data[i].lunchbox + " : " + data[i].order + "個 <br />";
        }
        document.getElementById("demo").innerHTML = str;
      }
​
      window.addEventListener('DOMContentLoaded', init)
    </script>
<head>
​
<body>
    <div id="demo"></div>
</body>
</html>
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers