从网站构建器HTML内容框中,使用javascript从Google电子表格中过滤文本/名称

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从网站构建器HTML内容框中,使用javascript从Google电子表格中过滤文本/名称相关的知识,希望对你有一定的参考价值。

我是编程新手。我刚刚创建了一个简单的搜索工具,从表中过滤名称,它的工作原理。突然,go daddy网站建设者html内容框中的字符数量有限。但我需要包含更多内容。现在我使用谷歌电子表格处理更多内容。我已经在我的代码中包含了一个iFrame来查看电子表格。但我不知道如何使用javascript代码从电子表格中过滤名称。请帮我。提前致谢。

这是我的代码:

我的大多数代码来自其他线程,我只是根据我的需要修改它。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<style>


body {

   background-image: url("http://www.sethnet.org/wp-content/uploads/2018/08/5485436-business-wallpaper.jpg");
   background-size: 1080px 800px;
   background-repeat: no-repeat;
   background-position: fixed;

}

*{
  box-sizing: border-box;
}


#myInput {

  background-image:url('https://previews.123rf.com/images/arhimicrostok/arhimicrostok1708/arhimicrostok170801660/84518390-icon-of-loupe-search-button-magnifying-glass-flat-design-style-.jpg');
  background-size: 32px 22px;
 background-position: 1%;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 5px solid #ADD8E6;
  position: center;
  margin-top: 50px;
  margin-left : 25% ;

}


</style>
</head>
<body>


<!-- Header -->

  <div class="w3-center">
    <h1> <br><br></h1>
  </div>

  <div class="w3-center">
    <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>We</b></span> <span class="w3-pink w3-opacity-min w3-hide-small w3-text-White">Search</span></h1>
  </div>
</header>

<div>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Names.." title="Type in a name">

</div>


<div class="w3-center" "w3-margin">

<p><br></p>

<iframe src="https://docs.google.com/spreadsheets/example" 
style="height:1000px;width:100%; 
border: 3px solid #ADD8E6;
transition:height 1.5s ease;
-webkit-transition:height 1.5s ease;
-moz-transition:height .25s ease; onload=access()">
</iframe>

</div>


  <div class="w3-center">
    <h1> <br><br><br></h1>
  </div>


<script>


window.onload = function() {
  var rows = document.querySelectorAll('iframe');

  for (var i = 0; i < rows.length; i++) {
    rows[i].style.display = 'none';
  }
}

document.addEventListener('DOMContentLoaded', function () {
    ContactsearchFX();
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});

function ContactsearchFX() {
  var input, filter, Spreadsheet, tr, td, i;     
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  Spreadsheet = document.getElementByTagName("iframe");
  tr = Spreadsheet.rows;
  for (i = 0; i < tr.length; i++) {
    td = tr[i].cells[0];
    if (td) {
      tr[i].style.display = filter && td.textContent.toUpperCase().indexOf(filter) > -1
        ? "" : "none";
    }
  }
}

</script>
</body>
</html>
答案

有很多事情是行不通的。

  1. 如果您打开Web控制台,则会看到一些JavaScript错误。尝试先修复它们。其中之一是函数getElementByTagName()的调用,它不存在。有一个函数getElementsByTagName()(注意's')返回一个标签列表 - 你想要第一个。
  2. iframe内容不包含太多,如果您打开src<iframe>属性中指定的URL,则会看到,因此您找不到很多行。但也许这只是您提供的一个示例,而不是使用真正的电子表格。
  3. 但是当您的代码尝试访问iframe时,将不会加载iframe。只在文本字段中输入内容时调用ContactsearchFX()可能会有所帮助 - 这取决于您想要做什么。
  4. 内容是一个html文档本身,但它不包含直接包含行的数据结构。您需要使用DOM函数(例如getElementsByTagName())来访问内容。

我希望这有点帮助,但是我担心从互联网上获取一些代码片段来运行应用程序可能还不够......我认为你需要找一个能够为你做这项工作的人,除非你愿意自己学习编程。

以上是关于从网站构建器HTML内容框中,使用javascript从Google电子表格中过滤文本/名称的主要内容,如果未能解决你的问题,请参考以下文章

使用 Cordova 为本地静态网站提供服务?

将 JTextPane 设置为内容类型 HTML 并使用字符串构建器

js+css+html自动放大文本框中输入的内容

使用 Ajax 实时更改数据库

React Redux 附加组件

如何开发网站构建器应用程序