ข้อมูลและบัตรประจำตัวสมาชิก สมาคมฌาปนกิจสงเคราะห์ โกเชน (sheetrock)

 

code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setFaviconUrl('https://ik.imagekit.io/kmpeld0nh/GoshenN%20(3).png')
  .setTitle('ข้อมูลและบัตรประจำตัวสมาชิก สมาคมฌาปนกิจสงเคราะห์โกเชน')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
 
 
*********************


index.html
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
  <link href='https://fonts.googleapis.com/css?family=Sarabun' rel='stylesheet' type='text/css'>
  <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css" rel="stylesheet"
    type="text/css">
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>  
  <script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>
  <script src="https://unpkg.com/datatables@1.10.18/media/js/jquery.dataTables.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    body {
      font-family: 'Sarabun', sans-serif;
    }
  </style>
</head>

<body>
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-light bg-success mb-3">
        <div class="container-fluid">
          <p class="text-center">
          <h3 class="Sarabun text-white"><i class="fa-solid fa-graduation-cap"></i>ข้อมูลและบัตรประจำตัวสมาชิก สมาคมฌาปนกิจสงเคราะห์โกเชน </h3>
          </p>
        </div>
      </nav>
      <table id="data-table" class="display responsive nowrap" style="width:100%">
        <thead class="bg-success text-white"></thead>
      </table>
    </div>
     <!-- Footer
      <footer class="text-muted text-center mt-2">
        <p style="font-size:12px;"> &copy; 2022 <a style="color:green;text-decoration:none"
            href="https://examblog64.krooluang.com/p/examvip.html" target="_blank">Contact</a></p>
        <a href="https://lin.ee/Kxm6o8Z"
          target="_blank"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/th.png" alt="เพิ่มเพื่อน" height="36" border="0"></a>
      </footer> -->

  <script>
    // Define spreadsheet URL.
 var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/19tfzvfqrs9AQKRds2LVKndic-mNsxRdUaj8x5xP3cLs/edit#gid=0';

  $('#data-table').sheetrock({
  url: mySpreadsheet,
  query: ("select A,B,C,D,E,F,G,H,I,J,K,L,M,N offset 2"),
  }).on('sheetrock:loaded', function () {
    $(this).DataTable({
    info: true,
    responsive: true,
    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "all"]],
    order: false,
    destroy:true,

    columnDefs: [
            {targets: [1,13],className:'all',},
         ],

    columns: [
      { title: "ID" },
      { title: "Name" },
      { title: "Birthdate" },
      { title: "Age" },
      { title: "Registdate" },
      { title: "AgeMember" },
      { title: "ReceiveName" },
      { title: "Relation" },
      { title: "Phone" },
      { title: "Pay before the date" },
      { title: "Balance" },
      { title: "Action" },
      { title: "Address" },
      { title: "Pic",
         render: function (data) {
         return '<img src="' + data + '" type="Button" height="40px" onClick="showPic(this)">';
          }
       },
      ],
     });
  });

 function showPic(el){
   let idd = el.parentNode.parentNode.cells[0].innerHTML;
   let name = el.parentNode.parentNode.cells[1].innerHTML;
   let birthdate = el.parentNode.parentNode.cells[2].innerHTML;
   let age = el.parentNode.parentNode.cells[3].innerHTML;
   let regdate = el.parentNode.parentNode.cells[4].innerHTML;
   let agemem = el.parentNode.parentNode.cells[5].innerHTML;
   let receiv = el.parentNode.parentNode.cells[6].innerHTML;
   let relation = el.parentNode.parentNode.cells[7].innerHTML;
   let phone = el.parentNode.parentNode.cells[8].innerHTML;
   let moneydate = el.parentNode.parentNode.cells[9].innerHTML;
   let balance = el.parentNode.parentNode.cells[10].innerHTML;
   let action = el.parentNode.parentNode.cells[11].innerHTML;
   let address = el.parentNode.parentNode.cells[12].innerHTML;
   let pic = el.parentNode.parentNode.cells[13].innerHTML;
   let preview = pic.split('"')[1]
console.log(preview,idd,name,birthdate,age,regdate,agemem,receiv,relation,phone,moneydate,balance,action,address)
Swal.fire({
  position:'top',
  showCloseButton: true,
  html:
  '<table class="table table-striped" style="text-align: left">'+
    '<tr>'+
'<th colspan="2" class= "bg-success text-white text-center mb-2 p-2">ข้อมูล</th>'+  
  '</tr>'+
    '<tr>'+
'<th>ID</th>'+  
'<td>'+idd+'</td>'+
  '</tr>'+
  '<tr>'+
'<th>Name</th>'+  
'<td>'+name+'</td>'+
  '</tr>'+
    '<tr>'+
'<th>Birthdate</th>'+  
'<td>'+birthdate+'</td>'+
  '</tr>'+
    '<tr>'+
'<th>Age</th>'+  
'<td>'+age+'</td>'+
  '</tr>'+
    '<tr>'+
'<th>Registdate</th>'+  
'<td>'+regdate+'</td>'+
  '</tr>'+
    '<tr>'+
'<th>AgeMember</th>'+  
'<td>'+agemem+'</td>'+
  '</tr>'+
    '<tr>'+
'<th>ReceiveName</th>'+  
'<td>'+receiv+'</td>'+
  '</tr>'+
      '<tr>'+
  '<th>Relation</th>'+  
  '<td>'+relation+'</td>'+
    '</tr>'+
      '<tr>'+
  '<th>Phone</th>'+  
  '<td>'+phone+'</td>'+
    '</tr>'+
      '<tr>'+
  '<th>Pay before the date</th>'+  
  '<td>'+moneydate+'</td>'+
    '</tr>'+
      '<tr>'+
  '<th>Balance</th>'+  
  '<td>'+balance+'</td>'+
    '</tr>'+
      '<tr>'+
  '<th>Action</th>'+  
  '<td>'+action+'</td>'+
    '</tr>'+
     '<tr>'+
  '<th>Address</th>'+  
  '<td>'+address+'</td>'+
    '</tr>'+
 '<tr>'+
'<td colspan="2" style="text-align: center">'+'<img src="' +preview+ '"width="50%">'+'</td>'+
 '</tr>'+

  '</table>',
  showConfirmButton: false,
})

 }

  </script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
  </script>
</body>

</html>


 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น

สมัครสมาชิก: บทความ (Atom)