tables/index.html at master · dancxjo/tables · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
  <head>
    <title>Spreadsheet Demo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="spreadsheet.js"></script>
  </head>
  <body>
    <section>
      <h1>List of oldest dogs</h1>
      <p>The following table is a demonstration of my javascript library. It features the following:
        <ul>
          <li>Column sorting</li>
          <li>Editable contents</li>
          <li>Custom formatting -- custom functions are used to format the date properly</li>
          <li>Custom styling</li>
        </ul>
        The library is compatible across most major browsers.
      </p>

      <table id="table1"></table>
      <p>Source: <a href="http://en.wikipedia.org/wiki/List_of_oldest_dogs">Wikipedia</a></p>
      <script>
        // We'll be listing dogs
        function Dog(name, born, died, breed, country) {

          this.name = {content:name};
		  var bDate = new Date(born[2], born[0], born[1],0,0,0);
          this.born = {content:25569.0 + ((bDate.getTime() - (bDate.getTimezoneOffset() * 60 * 1000)) / (1000 * 60 * 60 * 24)), format:slashDateUS};
		  var dDate = new Date(died[2], died[0], died[1],0,0,0);
          this.died = {content:25569.0 + ((dDate.getTime() - (dDate.getTimezoneOffset() * 60 * 1000)) / (1000 * 60 * 60 * 24)), format:slashDateUS};
          //this.age = {content:"=@died-@born", format:function(diff) {return Math.floor(diff/(1000*60*60*24)/365.25);}};
		  this.age = {content:Number(dDate - bDate), format:function(diff) {return Math.floor(diff/(1000*60*60*24)/365.25);}};
          this.breed = {content:breed};
          this.country = {content:country, format:showFlag};
        }

        // A helper for displaying dates
        function slashDateUS(number) {
		  date = new Date((number - (25567 + 1))*86400*1000);
          month = date.getMonth();
          day = date.getDate();
          year = date.getFullYear();
          return month + "/" + day + "/" + year;
        }

        // A helper for displaying countries
        var codes = {
          us: ["United States", "http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/23px-Flag_of_the_United_States.svg.png"],
          uk: ["United Kingdom","http://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/23px-Flag_of_the_United_Kingdom.svg.png"],
          ja: ["Japan",         "http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/23px-Flag_of_Japan.svg.png"],
          au: ["Australia",     "http://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Flag_of_Australia.svg/23px-Flag_of_Australia.svg.png"],
          it: ["Italy",         "http://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/23px-Flag_of_Italy.svg.png"],
          po: ["Poland",        "http://upload.wikimedia.org/wikipedia/en/thumb/1/12/Flag_of_Poland.svg/23px-Flag_of_Poland.svg.png"]
        };

        function showFlag(code) {
          return "<img src='"+codes[code][1]+"'/> "+codes[code][0];
        }

        var headings = {name:"Name", born:"Born", died:"Died", age:"Age (in years)", breed:"Breed", country:"Country of Origin"};
        var data = [
          new Dog("Max",             [ 8, 9,1983], [ 5,18,2013], "Terrier", "us"),
          new Dog("Bella",           [ 1, 1,1982], [ 9, 6,2008], "Labrador cross", "uk"),
          new Dog("Bluey",           [ 6, 7,1910], [11,14,1939], "Australian Cattle Dog", "au"),
          new Dog("Lady",            [ 1, 1,1908], [ 8, 6,1937], "Poodle", "us"),
          new Dog("Minius",          [ 1,16,1985], [ 9,18,2013], "Cross-breed", "po"),
          new Dog("Bramble",         [ 9, 1,1975], [ 3,31,2003], "Border Collie", "uk"),
          new Dog("Adjutant",        [ 8,14,1936], [11,20,1963], "Labrador cross", "uk"),
          new Dog("Butch",           [ 1, 1,1975], [ 1, 1,2003], "Beagle", "us"),
          new Dog("Smokey",          [ 1,18,1986], [ 9,18,2013], "Shih Tzu", "us"),
          new Dog("Pusuke",          [ 4, 1,1985], [12, 5,2011], "Cross-breed", "ja"),
          new Dog("Sugar",           [ 8,18,1952], [ 8,13,1977], "Unknown", "us"),
          new Dog("Bricciola",       [ 3, 1,1989], [ 9,18,2013], "Mutt", "it"),
          new Dog("Piccolo",         [10, 1,1987], [12,26,2010], "Mutt", "it"),
          new Dog("Kathey T. Dog",   [ 1, 8,1991], [ 2, 6,2013], "Mutt", "us"),
          new Dog("Chanel",          [ 5, 1,1988], [ 8,28,2009], "Dachshund", "us"),
          new Dog("Winston Rha",     [12,12,1992], [ 5,15,2013], "Schnauzer Poodle mix", "us"),
          new Dog("Schoep",          [ 7,18,1993], [ 7,18,2013], "Shepherd mix", "us"),
          new Dog("Libby Sheffield", [ 7,15,1992], [ 9,13,2013], "Mutt", "us")
        ];
        var table = new Table("table1", data, headings);
        table.styleColumn("born", "textAlign", "right");
        table.styleColumn("died", "textAlign", "right");
        table.styleColumn("age", "textAlign", "right");
        table.styleRow(3, "background", "yellow");
      </script>
    </section>
  </body>
</html>