BULK UPDATE DATA IN SHEET
If you are creating a school project and want to put a function that can make changes in all students's data if they all are belongs from particular class or section, then you have to defined your code as following example.
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
var ws = SpreadsheetApp.openById("SPREADSHEET ID").getSheetByName("Sheet1");
//function to update datafunction eUpdate(sv,inv){
var db = ws.getDataRange().getValues();
for(var i = db.length-1; i >= 0; i--){
if(db [i][4] === sv){
ws.getRange(i+1, 6).setValue(inv);
}
}
return "Value successfully updated for "+sv+".";
};
function fin(){
var wv = ws.getDataRange().getValues();
var li = "<table class='w3-table-all'><tr class=fix><th>PHOTO</th><th>Name</th>
<th>Contact</th><th>Class</th><td>Notable column</td></tr>";
for(var i=1;i<wv.length;i++){
if(wv[i][0]!=""){
li+= "<tr><td width=90px><img src='"+wv[i][1]+"' width='90px' height='100px'><br>ID:"+
wv[i][0]+"</td><td>"+wv[i][2]+"</td><td>"+wv[i][3]+"</td><td>"+wv[i][4]+"</td><td>"+
wv[i][5]+"</td></tr>";
}
}
return li;
}
Now create a index.html file in your page and paste the following code in it.
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fix{position: sticky;top: 0;}
</style>
</head>
<body onload="inif()">
<div class="w3-row-padding w3-border-bottom">
<div class="w3-col s6">
<select id="cl" class="w3-select w3-col s6">
<option value="">CLASS</option>
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
</select>
<input type="text"id="inv"class="w3-input w3-col s6"placeholder="Value to save">
</div>
<div class="w3-col s1">
<input type="submit"value="CHANGE"class="w3-btn w3-teal w3-hover-red" onclick="cvc(this)"/>
</div>
<div class="w3-col s1">
<i id="spin" class="fa fa-refresh fa-0"onclick="inif(this)" style="font-size:20px"></i>
</div>
<div class="w3-col s4 w3-left">
<i id="info"></i>
</div>
</div>
<div style="overflow: auto;height:480px;">
<div id="list"></div>
</div>
<script>
function inif(){
document.getElementById("spin").classList.add('fa-spin');
document.getElementById('info').innerHTML = "Loding...";
google.script.run.withFailureHandler(fail)
.withSuccessHandler(readData)
.fin();};
function cvc() {
var sel = document.getElementById('cl');
var sv = sel.options[sel.selectedIndex].value;
var inv = document.getElementById("inv").value;
if(sv === ""|| inv === ""){
document.getElementById('info').innerHTML = "Selection and input are required.";
}else{
document.getElementById("spin").classList.add('fa-spin');
document.getElementById('info').innerHTML = "Working on...";
google.script.run.withFailureHandler(fail)
.withSuccessHandler(pass)
.eUpdate(sv,inv);}};
function fail(error){
document.getElementById("spin").classList.remove('fa-spin');
document.getElementById('info').innerHTML = error;
};
function readData(info){
document.getElementById("spin").classList.remove('fa-spin');
document.getElementById('info').innerHTML ="Successfully loaded.";
document.getElementById('list').innerHTML = info;
};
function pass(resp){
document.getElementById("spin").classList.remove('fa-spin');
document.getElementById('info').innerHTML =resp;
document.getElementById('list').innerHTML = "Getting updates...";
inif();
};
</script>
</body>
</html>
This is the example sheet. I have used this in this project you can make changes
according to your requirment.
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------