Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 26.06.2016, 22:50
zav zav вне форума
Новичок на форуме
Отправить личное сообщение для zav Посмотреть профиль Найти все сообщения от zav
 
Регистрация: 26.06.2016
Сообщений: 8

рони,
большое Вам спасибо!!!!
Ответить с цитированием
  #12 (permalink)  
Старый 02.07.2018, 22:34
Новичок на форуме
Отправить личное сообщение для kostas88 Посмотреть профиль Найти все сообщения от kostas88
 
Регистрация: 02.07.2018
Сообщений: 5

У меня вопрос я использую поиск по таблице html через js - мой код ниже. Вопрос в том у меня большая таблица много строк, как сделать чтоб табличка была скрыта и только после запроса выводился ответ.
<input id='myInput' onkeyup='searchTable()' type='text'>
<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>
<table id="myTable">
<tbody>
<tr>
<td>Afghanistan</td>
<td>+93</td>
<td>Афганистан</td>
<td>Афганістан</td>
</tr>
Ответить с цитированием
  #13 (permalink)  
Старый 02.07.2018, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

kostas88,
<meta charset="utf-8">
<style type="text/css">
  #myTable tr{
      display:  none;
  }

</style>
<input id='myInput' onkeyup='searchTable()' type='text'>
<script>
function searchTable() {
    var input, filter, display, table, tr, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        var text = tr[i].textContent.toUpperCase();
        display = "";
        if (filter && text.indexOf(filter) > -1 ) display = "table-row"
        tr[i].style.display = display;
    }
}
</script>
<table id="myTable">
<tbody>
<tr>
<td>Afghanistan</td>
<td>+93</td>
<td>Афганистан</td>
<td>Афганістан</td>
</tr>
</tbody></table>
Ответить с цитированием
  #14 (permalink)  
Старый 05.07.2018, 22:38
Новичок на форуме
Отправить личное сообщение для kostas88 Посмотреть профиль Найти все сообщения от kostas88
 
Регистрация: 02.07.2018
Сообщений: 5

А если у меня вордпрес страница. и структура следующая:
<p> some text</p>
тут будет код и таблица
<p> some text</p>
Извините сразу если тупой вопрос - но к сожалению сам не смог додуматся
Ответить с цитированием
  #15 (permalink)  
Старый 05.07.2018, 22:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от kostas88
А если у меня
в чём проблема? что не работает?
Ответить с цитированием
  #16 (permalink)  
Старый 09.07.2018, 09:15
Новичок на форуме
Отправить личное сообщение для kostas88 Посмотреть профиль Найти все сообщения от kostas88
 
Регистрация: 02.07.2018
Сообщений: 5

Сообщение от рони Посмотреть сообщение
в чём проблема? что не работает?
когда ставлю стиль для скрытия таблицы, у меня перекрывается основной стиль шаблона
Ответить с цитированием
  #17 (permalink)  
Старый 09.07.2018, 09:23
Новичок на форуме
Отправить личное сообщение для kostas88 Посмотреть профиль Найти все сообщения от kostas88
 
Регистрация: 02.07.2018
Сообщений: 5

Вот сделал так но у меня весь текст скрыт
<?php 
require('header.php'); ?>
<div class="content-wrapper">
	<main class="content">


<!doctype html>
<html lang="en">
<meta charset="utf-8">
<style>
  #myTable tr{
      display:  none;
  }
<body>


<p>text</p>


<input id='myInput' onkeyup='searchTable()' type='text'>
<script>
function searchTable() {
    var input, filter, display, table, tr, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        var text = tr[i].textContent.toUpperCase();
        display = "";
        if (filter && text.indexOf(filter) > -1 ) display = "table-row"
        tr[i].style.display = display;
    }
}
</script>
<table id="myTable">
<tbody>
<tr>
<td>Afghanistan</td>
<td>+93</td>
<td>Афганистан</td>
<td>Афганістан</td>
</tr>
<tr>
<td>Albania</td>
<td>+355</td>
<td>Албания</td>
<td>Албанія</td>
</tr>

</tbody>
</table>
<p>text</p>


</body>
</html>
			
		
	</main>	
	<?php 
	require('sidebar.php'); ?>
</div><!-- /.content-wrapper -->
<?php require('footer.php'); ?>
Ответить с цитированием
  #18 (permalink)  
Старый 09.07.2018, 09:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от kostas88
Вот сделал так но у меня весь текст скрыт
может в строке 13 забыли </style>
Ответить с цитированием
  #19 (permalink)  
Старый 09.07.2018, 13:45
Новичок на форуме
Отправить личное сообщение для kostas88 Посмотреть профиль Найти все сообщения от kostas88
 
Регистрация: 02.07.2018
Сообщений: 5

Сообщение от рони Посмотреть сообщение
может в строке 13 забыли </style>
Спасибо огромное - если буду не внимательным точно не получиться)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск по таблице и перестановка строк KemPavel jQuery 2 19.10.2015 12:28
Живой поиск JQUERY + AJAX + PHP + MYSQL dimi007 AJAX и COMET 2 22.07.2014 13:50
Поиск по таблице - вывод cript Элементы интерфейса 8 15.05.2014 07:50
фильтрация и поиск в таблице htm FedyaLutkovski Элементы интерфейса 0 28.12.2012 20:11
Поиск в тексте javascript jQuery 3 31.05.2011 11:40