首页 > 解决方案 > 如果第 1 行已填满且用户需要订购超过 1 个产品,如何在 Material Request Web 应用程序中添加新行

问题描述

我在一个网络应用程序中工作作为材料请求,因此用户可以根据他们的需要填写,现在网络应用程序可以工作,但如果有人需要超过 1 个产品,他们将需要填写表格 X 次。如果填充了“第 1 行”(选择的材料和数量),我正在寻找一种向界面添加新“行”的方法。

谢谢

这是脚本项目的链接

https://script.google.com/d/1nfijxPWhcrAOBJFC4YT41u7uYxuAjHjPB0J8Y-CDdqIEdIjqXISWwTSS/edit?usp=sharing

这是已发布工具的链接 https://script.google.com/a/macros/novica.com/s/AKfycbwmU_KqjnBB8kE0BpuvBH_mIRz7BTFCWaqYtbWhbPQztE822v5C/exec

标签: google-apps-script

解决方案


const row = function(count) {
  return `
<div class="row">
      <div class="input-field col s6">
       <select  id ="options${count}" onchange="productSelected(this.id)">
         <option value="" disabled="" selected="">Select your Products</option>     
         <option>Hojas</option>
         <option>Plumas</option>
         <option>Grapas</option>
         <option>Cinta</option>
         <option>Toner</option>
         <option>Otros</option>
         <option>Varios</option>
         <option>Herramientas</option>
        </select>
      <label>Products</label>
  </div>
   <div class="input-field col s6">
          <input id="qty" type="number" class="validate">
          <label for="qty">Qty</label>
        </div>
      
      
      </div><!-- Close Row -->`;
};

function appendRow() {
  count++;
  document.querySelector('.container .row:last-child').insertAdjacentHTML('beforebegin', row(count));
  const element = document.getElementById(`options${count}`);
  M.FormSelect.init(element);
}

let count = 0;
window.onload = function() {
  appendRow();
};

function productSelected(id) {
  if (id === `options${count}`) { appendRow(); }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container"> 
      <div class="row" >
      <button id="btn" class="waves-effect waves-light btn-small blue darken-3"><i class="material-icons left">add_shopping_cart</i>Send</button>
      </div><!-- Close Row -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


推荐阅读