Из окна содержимого HTML для веб-сайта, фильтруйте текст / имена из электронной таблицы Google, используя JavaScript - PullRequest
Новая
       20

Из окна содержимого HTML для веб-сайта, фильтруйте текст / имена из электронной таблицы Google, используя JavaScript

0 голосов
/ 09 марта 2019

Я новичок в программировании.Я только недавно создал простой инструмент поиска, фильтрующий имена из таблицы, и он работает.Внезапно количество символов в поле содержимого html-кода веб-сайта go daddy ограничено.Но мне нужно включить больше контента.Теперь я использовал электронную таблицу Google для обработки большего количества содержимого. Я уже включил 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 Ответ

0 голосов
/ 12 марта 2019

Есть много вещей, которые не будут работать.

  1. Есть пара ошибок JavaScript, которые вы увидите, если откроете веб-консоль. Попробуйте исправить их в первую очередь. Одним из них является вызов функции getElementByTagName(), которая не существует. - это функция getElementsByTagName() (обратите внимание на 's'), которая возвращает список тегов - вам нужен первый.
  2. Содержимое iframe не содержит много, что вы увидите, если откроете URL, указанный в атрибуте src вашего <iframe>, поэтому вы не сможете найти большую часть строк. Но, возможно, это просто пример, который вы предоставили вместо использования реальной электронной таблицы.
  3. Но iframe не будет загружен, когда ваш код попытается получить к нему доступ. Это может помочь вызвать ContactsearchFX() только тогда, когда что-то набрано в вашем текстовом поле - это зависит от того, что именно вы хотите сделать.
  4. Контент сам является html-документом, но он не содержит структуру данных со строками напрямую Вам необходимо использовать функции DOM (например, getElementsByTagName()) для доступа к содержимому.

Я надеюсь, что это немного поможет, но я боюсь, что этого может быть недостаточно, чтобы получить отрывки кода из Интернета для запуска приложения ... Я думаю, вам понадобится кто-то, кто сможет выполнить эту работу для вас, если вы не готовы изучать программирование самостоятельно.

...