Блог

Главная - Вопросы по программированию - В окне HTML-содержимого website Builder отфильтруйте текст / имена из электронной таблицы Google с помощью javascript

В окне HTML-содержимого website Builder отфильтруйте текст / имена из электронной таблицы Google с помощью javascript

#javascript #filter #full-text-search #spreadsheet

#javascript #Фильтр #полнотекстовый поиск #электронная таблица

Вопрос:

Я новичок в программировании. Я совсем недавно создал простой инструмент поиска, фильтрующий имена из таблицы, и он работает. Внезапно количество символов в окне 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 amp;amp; td.textContent.toUpperCase().indexOf(filter) > -1
        ? "" : "none";
    }
  }
}

</script>
</body>
</html>

Комментарии:

1. Добро пожаловать в Stack Overflow! Пожалуйста, добавьте какой-нибудь код, который вы пробовали.

2. Привет @JSchirrmacher, вот мой полный код. Поделитесь со мной, поскольку я не очень разбираюсь в программировании. 🙂

Ответ №1:

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

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

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