<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<head>
<style>
table.sortable thead {
background-color: #eee;
color: #666666;
cursor: default;
}
/* Scrollability of table */
table {
width: 800px;
}
/* fixed width table */
thead tr {
display: block;
}
/* makes it sizeable */
tbody {
display: block;
/* makes it sizeable */
height: 600px;
/* height of scrollable area */
overflow: auto;
/* scroll rather than overflow */
width: 100%;
/* fill the box */
}
thead th {
width: 100px;
}
/* fixed width for THs */
tbody td {
width: 100px;
}
/* fixed width for TDs */
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */
}
th {
background: #3086C2;
/* Darken header a bit */
font-weight: bold;
color: white;
}
td {
background: #000000;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #EBEBF7;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #FEFEFE;
}
tr td:hover {
background: #3086C2;
color: #FFF;
}
/* Hover cell effect! */
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #3086C2;
color: white;
}
li a:hover:not(.active) {
background-color: #DFDFDF;
color: #3086C2;
font-weight: bold;
}
a:visited {
color: #000000;
text-decoration: none
}
a:link {
color: #000000;
text-decoration: none
}
table.sortable thead {
background-color: #eee;
color: #666666;
font-weight: bold;
cursor: default;
}
</style>
</head>
</head>
<body>
<script>
var url = "https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv";
var cols = 8;
var table = "<table class=\"sortable\" cellpadding=\"5\" id=\"theTable\">";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
theData = xmlhttp.responseText;
console.log(theData.substring(0));
var rows = (theData.substring(0).split('"').length - 1) / 2 - 1;
for (i = 0; i < rows; i++) {
table += "<tr>"
for (j = 0; j < cols; j++) {
if (j == 0 || j == 5) {
idx = theData.indexOf(',');
theData = theData.substring(idx + 1)
}
if (i === 0) {
table += '<th>';
if (j === 7) {
idx = theData.indexOf("\n");
table += theData.substring(0, idx + 1);
theData = theData.substring(idx + 1);
} else {
idx = theData.indexOf(',');
table += theData.substring(0, idx + 1);
theData = theData.substring(idx + 1);
}
if (table.lastIndexOf(",") === table.length - 1) {
table = table.substring(0, table.length - 1);
}
table += '</th>';
} else {
table += "<td>"
if (j === 7) {
idx = theData.indexOf("\n");
if (idx === -1) {
idx = theData.length;
}
table += theData.substring(0, idx + 1);
theData = theData.substring(idx + 1);
} else if (j != 5 && j != 6) {
idx = theData.indexOf(',');
table += theData.substring(0, idx + 1);
theData = theData.substring(idx + 1);
} else {
theData = theData.substring(1);
idx = theData.indexOf('"');
data2 = theData.substring(0, idx);
theData = theData.substring(idx + 1);
theData = theData.substring(1);
l = data2.substring(0).split(',').length;
for (k = 0; k < l; k++) {
console.log(data2);
idx = data2.indexOf(",")
if (idx === -1) {
idx = data2.length;
}
table += data2.substring(0, idx);
table += "<br>"
data2 = data2.substring(idx + 1);
}
}
if (table.lastIndexOf(",") === table.length - 1) {
table = table.substring(0, table.length - 1);
}
table += "</td>"
}
}
table += "</tr>"
}
table += "</table>"
document.getElementById("display").innerHTML = table;
var newTableObject = document.getElementById('theTable');
sorttable.makeSortable(newTableObject);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
</script>
<div id="display"></div>
</body>
