Get sheet value by apps script to html table
Friends, today we all see how to get google spreadsheet cell value by apps script to html tabe.
for this goal we use following codes and follow following steps.
Step-1
first of all see the sheet that used in this program.
This is a Example sheet only. you should use as you need.
Step-2
We used following code to read the html file. Name Index.html
function doGet () {
var x ;
x = HtmlService.createTemplateFromFile('Index').evaluate();
x.setTitle("Project Title");
return x;
}
Step-3
We used following code to read the html file. Name css.html
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Step-4
We used following code to read the sheet value .function getDataR(cF) {
return SpreadsheetApp
.openById ( '1Jen2OZemz7nr1NRPb4eVOEGN_pLf9WTsnWnBFxtf_gE ' ) //
.getSheetByName('Sheet1').getDataRange().getValues();
}
Step-5
We used following html table and code.
This code to get read value: <? var data = getDataR(); ?>
This code to include css style: <?!= include('css') ?>
We define the row using array [row][column] = [0] First row [0] First column.
<!DOCTYPE html>
<html>
<head>
<? var data = getDataR(); ?>
<?!= include('css') ?>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th><?= data[0][0] ?></th>
<th><?= data[0][1] ?></th>
<th><?= data[0][2] ?></th>
<th><?= data[0][3] ?></th>
</tr>
<tr>
<td><?= data[1][0]; ?></td>
<td><?= data[1][1] ?></td>
<td><?= data[1][2] ?></td>
<td><?= data[1][3] ?></td>
</tr>
<tr>
<td><?= data[2][0]; ?></td>
<td><?= data[2][1] ?></td>
<td><?= data[2][2] ?></td>
<td><?= data[2][3] ?></td>
</tr>
<tr>
<td><?= data[3][0]; ?></td>
<td><?= data[3][1] ?></td>
<td><?= data[3][2] ?></td>
<td><?= data[3][3] ?></td>
</tr>
<tr>
<td><?= data[4][0]; ?></td>
<td><?= data[4][1] ?></td>
<td><?= data[4][2] ?></td>
<td><?= data[4][3] ?></td>
</tr>
<tr>
<td><?= data[5][0]; ?></td>
<td><?= data[5][1] ?></td>
<td><?= data[5][2] ?></td>
<td><?= data[5][3] ?></td>
</tr>
<tr>
<td><?= data[6][0]; ?></td>
<td><?= data[6][1] ?></td>
<td><?= data[6][2] ?></td>
<td><?= data[6][3] ?></td>
</tr>
</table>
</body>
</html>
Step-6
We used following css. Name: css.html
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
| CodyLab Blogger CodyLab Blogger |
Have a nice day!
-------------------------- -------------------------
-------------------------- -------------------------