Curso Google Sheets com HTML e JS - Aula-03 Preenchendo uma Table
Caso esse conteúdo serviu pra vc e queira me ajudar meu pix sorteagora12@gmail.com
caso você queira também pode me ajudar a criar mais conteúdo assinando meu blog com uma contribuição mensal de qualquer valor.
Fala Pessoal.
Segue abaixo scripts usados na Aula 03
Script para abrir HTML
Script Para Cadastrar
Script Para Buscar Clientes
E o HTML com seus scripts.
var Plan = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1rIKZc_977MJoNDPrVVB_Jbz32mzeCOTJQx5JDvPCZCc/edit#gid=0").getSheetByName("clientes");
var Linha = Plan.getLastRow();
//Script para abrir HTML
function Abrir_Form_Curso() {
var Form =HtmlService.createTemplateFromFile("FORM_CURSO");
var mostrarform = Form.evaluate();
mostrarform.setTitle("Clientes").setHeight(1400).setWidth(1400);
SpreadsheetApp.getUi().showModalDialog(mostrarform,"Clientes")
//SpreadsheetApp.getUi().showSidebar(mostrarform)
//SpreadsheetApp.getUi().showModelessDialog(mostrarform,"Clientes")
}
//Script Para Cadastrar
function CadastrarClientes(Dados){
var Plan = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1rIKZc_977MJoNDPrVVB_Jbz32mzeCOTJQx5JDvPCZCc/edit#gid=0").getSheetByName("clientes");
var Linha = Plan.getLastRow()+1;
Plan.getRange(Linha,1).setValue(Linha);
Plan.getRange(Linha,2).setValue([Dados.Nome]);
Plan.getRange(Linha,3).setValue([Dados.CPF]);
Plan.getRange(Linha,4).setValue([Dados.Telefone]);
Plan.getRange(Linha,5).setValue([Dados.CEP]);
return [Dados.Nome]
}
//Script Para Buscar Clientes
function PegarClientes(){
var Matriz = []
Matriz= Plan.getRange("A2:E"+Linha).getValues();
var Str = Matriz.join("#");
return Str
}
HTML com seus scripts.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="PrencherTabela()">
<div class="row">
<div class="input-field col s3">
<input id="nome" type="text" class="validate">
<label for="nome">Nome</label>
</div>
<div class="input-field col s3">
<input id="cpf" type="text" class="validate">
<label for="cpf">CPF</label>
</div>
<div class="input-field col s3">
<input id="telefone" type="text" class="validate">
<label for="telefone">Telefone</label>
</div>
<div class="input-field col s3">
<input id="cep" type="text" class="validate">
<label for="cep">CEP</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" name="action" onclick="Cadastrar()">Salvar
<i class="material-icons right">send</i>
</button>
</div>
<div class="row">
<table id="tb01">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>CPF</th>
<th>Telefone</th>
<th>CEP</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function Cadastrar(){
var Nome = document.getElementById("nome").value;
var CPF = document.getElementById("cpf").value;
var Telefone=document.getElementById("telefone").value;
var CEP =document.getElementById("cep").value;
var Dados ={
Nome:Nome,
CPF:CPF,
Telefone:Telefone,
CEP:CEP
}
google.script.run.withSuccessHandler(Retorno).CadastrarClientes(Dados);
}
function Retorno(R){
PrencherTabela()
alert(R + " Cadastrado com sucesso")
}
function PrencherTabela(){
LimparTabela();
google.script.run.withSuccessHandler(RetornoTabela).PegarClientes();
}
function RetornoTabela(R){
var Matriz = R.split("#");
Matriz = Matriz.map(function(r){ return r.split(",")});
console.table(Matriz);
var Tabela = document.getElementById("tb01")
for(var i = 0; i< Matriz.length;i++){
var Linha = Tabela.insertRow(Tabela.rows.length);
for(var j = 0; j < Matriz[i].length;j++){
var Cell = Linha.insertCell(j);
Cell.innerHTML = Matriz[i][j];
}
}
}
function LimparTabela(){
var Tabela = document.getElementById("tb01");
while(Tabela.rows.length>1){
Tabela.deleteRow(1);
}
}
</script>
</body>
</html>
Comentários
Postar um comentário