Google sheet Apps script | Form nhập liệu động – Data entry form with dynamic multi-field

12/12/2024 giaoanppt

Giaoan.link chia sẻ tiếp tục đến các bạn một project về Google sheet Apps script | Form nhập liệu động – Data entry form with dynamic multi-field. Đối với project này bạn sẽ tùy ý thêm các dòng thông tin – Mỗi dòng thông tin gồm nhiều trường thông tin. Khi bạn submit, dữ liệu sẽ được ghi tuần tự vào sheet data.

Bạn có thể tìm thêm nhiều project khác tại đây.

Những project ngẫu nhiên:

XEM VIDEO HƯỚNG DẪN

Mã trên trang “Code.gs”

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function submitData(data) {
  var sheet = SpreadsheetApp.openById('1fdv4QHGJVDED6rJj4ndZlLl-Bji6yg7AklJA1yAL3qc').getSheetByName('Data');
  var lastRow = sheet.getLastRow();
  for (var i = 0; i < data.length; i++) {
    sheet.appendRow([lastRow +i , data[i].productCode, data[i].productName, data[i].quantity]);
  }
}

Mã trên trang “Index.html”

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    function addProductRow() {
      var table = document.getElementById('productTable');
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = table.rows.length - 1;
      cell2.innerHTML = '<input type="text" name="productCode">';
      cell3.innerHTML = '<input type="text" name="productName">';
      cell4.innerHTML = '<input type="number" name="quantity">';
    }

    function submitForm() {
      var rows = document.getElementById('productTable').rows;
      var data = [];
      for (var i = 1; i < rows.length; i++) {
        var productCode = rows[i].cells[1].getElementsByTagName('input')[0].value;
        var productName = rows[i].cells[2].getElementsByTagName('input')[0].value;
        var quantity = rows[i].cells[3].getElementsByTagName('input')[0].value;
        data.push({productCode: productCode, productName: productName, quantity: quantity});
      }

      google.script.run.withSuccessHandler(function() {
        resetForm();
        alert('Dữ liệu được gửi đi thành công!');
      }).submitData(data);
    }

    function resetForm() {
      var table = document.getElementById('productTable');
      while (table.rows.length > 1) {
        table.deleteRow(1);
      }
      addProductRow(); // Add one initial row
    }

    window.onload = function() {
      resetForm();
    };
    
  </script>
  <style>
    .table2 {
          width: 100%;
          border-collapse: collapse;
          border: 1px solid grey;
        }
        .table2 th {
          padding: 10px 0px;
          text-align: center;
          font-size:1em;
          font-weight: bold;
          background-color: #f68429;
          color: black;
          border: 1px solid grey;
        }

        .table2 td {
          text-align: center;
          border: 1px solid grey;
          padding: 5px;
        }

        .table2 tr:{
          background-color: #fbd2d2;
        }
    .div-container{
      width: 90%;
      border: 1px solid grey;
      border-radius: 10px;
      box-shadow: 2px 2px 5px grey;
      padding: 10px;
      margin-left: auto;
      margin-right: auto;
    }
    input{
      border: 1px solid grey; 
      border-radius: 8px;
      outline: none;
      width: 95%;
      padding: 5px;
    }
    input:focus{
      background-color: yellow;
      border: 1px solid blue; 
    }

    .button-container { 
      display: flex; 
      justify-content: space-between; 
      margin-top: 10px;
      }
    .button-left { 
        border: 1px solid grey;
        border-radius: 10px;
        background-color: yellow;
        color:black;
        font-weight: bold;
        align-self: flex-start; 
        padding: 8px;
        cursor: pointer;
      } 
      
    .button-right { 
        border: 1px solid grey;
        border-radius: 10px;
        background-color: #206d05;
        color: white;
        font-weight: bold;
        align-self: flex-end;
        padding: 8px;
        cursor: pointer;
      }

    .title{
      font-size: 1.5em;
      font-weight: bold;
      color: blue;
      text-align: center;
      padding: 10px;
    }
  </style>  
</head>
<body>
  <div class="div-container">
    <div class="title"> LẬP DANH SÁCH SẢN PHẨM</div>
    <table class="table2"  id="productTable">
      <tr>
        <th>SỐ TT</th>
        <th>MÃ SẢN PHẨM</th>
        <th>TÊN SẢN PHẨM</th>
        <th>SỐ LƯỢNG</th>
      </tr>
    </table>
      <div class="button-container">
          <button class="button-left" onclick="addProductRow()">+ THÊM</button>
          <button class="button-right" onclick="submitForm()">GỬI ĐI</button>
      </div>
  </div>
</body>
</html>