✍ 📁 🙈 🙉 🙊 : 建立 Google Sheets 為網頁資料庫

用JavaScript連結Google Sheets , 建立 Google Sheets 為網頁資料庫

<a  href="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-kD0kOAdZLL1zRQmDnrYQgAy2fdGVmUtyMw27lysn00Xco_T87dsbn6NUvpiSWlWR-P2dcxSzpSNf/pubhtml"
     target="_blank">My Google sheets</a> </h3>

// 修改資料 表格 ================================================= 
function  Dchange(x,xx,xxx){
    var person = prompt("Modify the content", xxx);
          if (person == null || person == xxx) {demo.innerHTML = "You canceled!" }
               else{  var Dtxt = xxx + "\n Revise to \n" + person  ;
                      if (confirm(Dtxt) == true) {  parameter = { dow: 'Dchange' , idd: x +1 , cow:xx +1 , newD:person } ;
                                                    $.get(appUrl, parameter, function(data) {  read(); });
                                                      }
               }
} 
  
  
// 讀取資料 表格 ================================================= 
function  Del(x){
  var Dtxt = "是否刪除 第" + x + "項資料"  ;
      Dtxt += "\n " + myJSON.content[x][0];
      Dtxt += "\n " + myJSON.content[x][1];
      Dtxt += "\n " + myJSON.content[x][2];
      Dtxt += "\n " + myJSON.content[x][3];
  
  if (confirm(Dtxt) == true) {  parameter = { dow: 'Del' , idd: x +1  } ;
                                $.get(appUrl, parameter, function(data) {  });
                                read () ;
                             }
}

// 讀取資料 表格 ================================================= 
function AddDt(){
  parameter = {dow:'Add' , 
               in1: in1.value ,
               in2: in2.value ,
               in3: in3.value ,
               in4: in4.value    };
              $.get(appUrl, parameter, function(data) {  });

read() ;  }

// 讀取資料 表格 ================================================= 
function read(){
   parameter = {dow:'read' };
            for(var t=1 ;t<6000 ;t=t+10){ setTimeout ( function(){ $('#table').text("READ" + Tt++) } ,  t ); }
                    Tt=0 ;
            setTimeout ( table,  6000 );

$.get(appUrl, parameter, function(data) {
	  	if(!data){ $('#table').text('無資料'); }
	  	          else{ myJSON = JSON.parse(data) ;   }
    })

}

// 顥示資料 表格 ================================================= 
function table(){

var tbt=""
  tbt +="<table id='customers'   ><tbody>" ;
  tbt +="<tr style='background:royalblue;color:white'>"
  tbt +="<th>id</th><th>column 1</th><th>column 2</th><th>column 3</th><th>column 4</th></tr>" ;

for(i=0 ;i<  myJSON.content.length;i++){
       tbt += "<tr>" ;
       tbt += "<td><input type='button' onclick='Del(" + i +  " )' value='✂' title='Del'>"
       tbt += "<input type='button' onclick='UA(" + i +  " )' value='⍏' title='above add row '>"
       tbt += "<input type='button' onclick='DA(" + i +  " )' value='⍖' title='below add row'>"
       tbt += " " + i

tbt += "</td>" ;
    
        for(ii=0 ; ii<myJSON.content[i].length;ii++){
           tbt +="<td onclick='Dchange("+ i + "," + ii + ",this.innerHTML )' title='change' >" ;
           tbt += myJSON.content[i][ii]  + "</td>" ;
                  }
                tbt += "</tr><tr></tr><tr>"  }
  
     tbt += "<td><button onclick='AddDt()' >add</button></td>"  ;     
     tbt += "<td><input id='in1' type='text' value='123456' />  </td>"  ;
     tbt += "<td><input id='in2' type='text' value='123456' />  </td>"  ;
     tbt += "<td><input id='in3' type='text' value='123456' />  </td>"  ;
     tbt += "<td><input id='in4' type='text' value='123456' />  </td></tr>" ;
     tbt +="</tbody></table>" ;
            $( "#table" ).html(tbt) ;  
  in1.value = "input new data "+myJSON.content.length ;
  in2.value = "input new data "+myJSON.content.length ;
  in3.value = "input new data "+myJSON.content.length ;
  in4.value = "input new data "+myJSON.content.length ;
  
   
}
// 顥示資料 表格 =================================================

read() ;

</script>

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  cursor:pointer;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
 
  input {cursor:pointer} 
</style>

☛ Blogger Google資料庫

Edit

用JavaScript連結Google Sheets 建立 Google Sheets 為網頁資料庫 Google Sheet 網頁資料庫 How to pull your data from Google Sheets to Web Google Sheets to Web SpreadsheetApp.openByUrl(); SpreadSheet.getSheetByName() SheetName.getRange() range.setValu()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單