个人中心
gpt4 book ai didi

javascript - 省略没有值的字段

转载 作者：可可西里 更新时间：2023-11-01 13:41:07 25 4
gpt4 key购买 nike

我需要通过 Google 表格发布考试结果。如果在框中提供卷号，搜索按钮会完美显示获得的标记，但我需要省略没有值的字段，如主题 3、5 等，以及 html 页面中的文本框

Here是我正在使用的工作表和我正在使用的代码......

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
       .setSandboxMode(HtmlService.SandboxMode.IFRAME)
       .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

//Search for the id and return the array for that row
function search(id) {
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/16IH3yKJjLwM9XA0c4_BN5MVQSKh8hV7gR6_kLLfe8to/edit#gid=0");
  var sheet = ss.getSheetByName("Sheet1");
  var values = sheet
  .getDataRange()
  .getValues()
  .filter(function(row) {
    return row[0] == id;
  });

   return values[0];
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
    .hidden {
     display:none;
     }
    </style>
  </head>
  <body>
  <input type="text" id="txtName"/>
  <button id="show">SHOW</button>
  <h1>FMATS</h1>
    Name <input type="text" id="name"/><br>
    Roll <input type="text" id="roll"/><br>
    Subject 1 <input type="text" id="sub1"/><br>
    Subject 2 <input type="text" id="sub2"/><br>
    Subject 3 <input type="text" id="sub3"/><br>
    Subject 4 <input type="text" id="sub4"/><br>
    Subject 5 <input type="text" id="sub5"/><br>
  </body>
<script>
//When click on show button it will run search function
window.onload = function(e){ 
  document.getElementById('show')
    .addEventListener('click', search);
}

//Get the value for txtName input and run search function in code.gs
function search() {
  var txtName = document.getElementById('txtName').value;
  google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  for (var i=0;i<values.length-2;i++) {
    if (values[i+2]==null) {
      toggleElement("sub"+i);
    } else {
      document.getElementById("sub"+i).value = values[i+2];
    }
  }  
  //rest of the code here
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  document.getElementById('sub1').value = values[2];
  document.getElementById('sub2').value = values[3];
  document.getElementById('sub3').value = values[4];
  document.getElementById('sub4').value = values[5];
  document.getElementById('sub5').value = values[6];
}
</script>
</html>

我需要从 HTML 页面中省略没有值的主题名称和文本框。如果搜索的卷不在表中，则应显示“未找到”。这不是必需的，但如果主题名称来自工作表的第 1 行，那就更好了。

我该怎么办？

最佳答案

有两种方法可以解决这个问题:

  1. 在服务器端创建您的 HTML(如 @Cooper 所说)
  2. 使用 JavaScript 操作 HTML

要在服务器端创建 HTML，您可以使用字符串并自动“写入”html。

那么你的函数将是这样的:

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(response) {
  document.getElementById("divid").innerHTML=html
});

如果你绝对想在客户端操作 HTML，你将使用这样的东西:

function toggleElement(id) {
  var td = document.getElementById(id).parentElement;
  var tr = td.parentElement;
  tr.classList.toggle("hidden");
}

用法是这样的:

function fillInfo(values) {
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  for (var i=0;i<values.length-2;i++) {
    if (values[i+2]==null) {
      toggleElement("sub"+i);
    } else {
      document.getElementById("sub"+i).value = values[i+2];
    }
  }  
  //rest of the code here
}

然后您将拥有一些执行此操作的 css:

.hidden {
  display:none;
}

编辑:

这就是您实现第一个解决方案的方式:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <input type="text" id="txtName"/>
  <button id="show">SHOW</button>
  <h1>FMATS</h1>
  <div id="dataDiv"></div>
  </body>
<script>
//When click on show button it will run search function
window.onload = function(e){ 
  document.getElementById('show')
    .addEventListener('click', search);
}

//Get the value for txtName input and run search function in code.gs
function search() {
  var txtName = document.getElementById('txtName').value;
  google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
  console.log(values);
  document.getElementById("dataDiv").innerHTML=values
}
</script>
</html>
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
       .setSandboxMode(HtmlService.SandboxMode.IFRAME)
       .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

//Search for the id and return the array for that row
function search(id) {
  var ss = SpreadsheetApp.openByUrl("SHEETS URL");
  var sheet = ss.getSheetByName("Sheet1");
  var values = sheet
  .getDataRange()
  .getValues()
  .filter(function(row) {
    return row[0] == id;
  })[0];
  var legends = sheet.getRange(1,1,1,sheet.getMaxColumns()).getValues()[0];
  return createHTML(legends, values);
}

function createHTML(legends, values) {
  Logger.log(legends);
  var htmlResult = "";
  for (var i=0; i<values.length; i++) {
    if (values[i]!=null && values[i]!=="") {
      htmlResult += '<div class="field">' + (legends[i]+"").replace("Sub", "Subject ") + '<input type="text" id="sub1" value="'+values[i]+'"></div>';
    }
  }
  return htmlResult;
}

希望这对您有所帮助!

关于javascript - 省略没有值的字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58292939/

25 4 0
文章推荐： windows - 让 CMake 在 Windows 上找到 flex
文章推荐： php - 奇怪的 for 循环语法
文章推荐： php - 动态设置 laravel jwt 的过期时间
文章推荐： javascript - 在 p5js 中使用通过 HTML DOM 文件 uploader 上传的图片
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com