27.03.2022, 12:24
Servus liebes Forum,
zuerst mal - ich bin absoluter Newbie in Sachen Java-Script. Deshalb bin ich auf Euere Hilfe angewiesen.
Hier mein Anliegen:
Ich habe in Google Sheets eine Tabelle mit mindestens 2 Tabellenblättern angelegt. Nun möchte ich in der .html-Seite 2 Container anlegen. Bis dahin klappt das auch. Aber ab jetzt bin ich mit meinem Latein am Ende, das es um Scripten geht. In dem linken Container nämlich soll Tabellenblatt 1 angezeigt werden im rechten Container soll Tabellenblatt 2 angezeigt werden.
Ich nutze hierfür ein Script von EasyData. Mit einem Tabellenblatt ist alles perfekt, aber sobald ich eben das 2. Tabellenblatt anzeigen möchte, weiß ich nicht mehr weiter. Aktuell wird nur ein Tabellenblatt angezeigt und beide Daten, die eigentlich separat angezeigt werden sollen, sind in der Google Sheets Datei nebeneinander angelegt. Dies gefällt mir aber eben nicht.
Hier der aktuell von mir genutzte Code:
Ich hoffe auf Euere Hilfe für Dummies.
Vielen lieben Dank schon mal im Voraus.
zuerst mal - ich bin absoluter Newbie in Sachen Java-Script. Deshalb bin ich auf Euere Hilfe angewiesen.
Hier mein Anliegen:
Ich habe in Google Sheets eine Tabelle mit mindestens 2 Tabellenblättern angelegt. Nun möchte ich in der .html-Seite 2 Container anlegen. Bis dahin klappt das auch. Aber ab jetzt bin ich mit meinem Latein am Ende, das es um Scripten geht. In dem linken Container nämlich soll Tabellenblatt 1 angezeigt werden im rechten Container soll Tabellenblatt 2 angezeigt werden.
Ich nutze hierfür ein Script von EasyData. Mit einem Tabellenblatt ist alles perfekt, aber sobald ich eben das 2. Tabellenblatt anzeigen möchte, weiß ich nicht mehr weiter. Aktuell wird nur ein Tabellenblatt angezeigt und beide Daten, die eigentlich separat angezeigt werden sollen, sind in der Google Sheets Datei nebeneinander angelegt. Dies gefällt mir aber eben nicht.
Hier der aktuell von mir genutzte Code:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<!-- MDB UI KIT -->
<!-- Custom styles -->
<style>
.headline-left {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 24px;
line-height: 60px;
font-weight: 600;
text-transform: uppercase;
background-color: rgba(0,0,0,0.0);
height: 60px;
width: 390px;
border-top-left-radius: 25px;
border-left: 1px solid #FFC524;
border-top: 1px solid #FFC524;
color: #E3E3E3;
padding-left: 30px;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.headline-right {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 24px;
line-height: 60px;
font-weight: 600;
text-transform: uppercase;
background-color: rgba(0,0,0,0.0);
height: 60px;
width: 350px;
border-top-left-radius: 25px;
border-left: 1px solid #FFC524;
border-top: 1px solid #FFC524;
color: #E3E3E3;
padding-left: 30px;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<link href="https://www.howe-simracing.de/css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!--Main layout-->
<div class="table-responsive">
<main>
<div class="headline-left">Quali & Rennergebnis</div>
<table class="table">
<thead class="bg-light" id="table-head">
</thead>
<tbody id="table-body">
</tbody>
</table>
</main>
</div>
<!--Main layout-->
<!--Footer-->
<!--Footer-->
</div>
</body>
<!-- Google API -->
<script src="https://www.howe-simracing.de/js/api.js"></script>
<!-- easyData -->
<script type="text/javascript" src="https://www.howe-simracing.de/js/easyData-google-sheets.js"></script>
<!-- easyData - Creating table -->
<script>
{
{
// Your API KEY
const API_KEY = "AIzaSyCOXUTqyeYSVPfcx-UiQoKg-ZTF49MeKGs";
function displayResult(response) {
let tableHead = "";
let tableBody = "";
let tableHead2 = "";
let tableBody2 = "";
response.result.values.forEach((row, index) => {
if (index === 0) {
tableHead += "<tr>";
tableHead2 += "<tr>";
row.forEach((val) => (tableHead += "<th>" + val + "</th>"));
row.forEach((val) => (tableHead2 += "<th>" + val + "</th>"));
tableHead += "</tr>";
} else {
tableBody += "<tr>";
tableBody2 += "<tr>";
row.forEach((val) => (tableBody += "<td>" + val + "</td>"));
row.forEach((val) => (tableBody2 += "<td>" + val + "</td>"));
tableBody += "</tr>";
}
});
document.getElementById("table-head").innerHTML = tableHead;
document.getElementById("table-body").innerHTML = tableBody;
document.getElementById("table-head2").innerHTML = tableHead2;
document.getElementById("table-body2").innerHTML = tableBody2;
}
function loadData() {
// Spreadsheet ID
const spreadsheetId = "1Uivpu2m-XTBqw8kYnDnTJrzBW_gmRnJmcYR3MrFrSGE";
const range = "Bahrain!A:Z";
getPublicValues({ spreadsheetId, range }, displayResult);
}
window.addEventListener("load", (e) => {
initOAuthClient({ apiKey: API_KEY });
});
document.addEventListener("gapi-loaded", (e) => {
loadData();
});
}
}
</script>
</html>
<html lang="de">
</html>Ich hoffe auf Euere Hilfe für Dummies.
Vielen lieben Dank schon mal im Voraus.