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

问题描述 投票：0回答：1

我是编程新手。我刚刚创建了一个简单的搜索工具，从表中过滤名称，它的工作原理。突然，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>
javascript filter full-text-search spreadsheet
1个回答
0
投票

有很多事情是行不通的。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.