Search html elements by phrase
Question
There is a simply html view:
<html>
<head>
</head>
<body>
<input id="summaryText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search"><br>
<table>
<tr>
<details>
<summary><b>First Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of First</li>
<li>group B of First</li>
</ul>
</details>
<details>
<summary><b>People</b></summary>
<ul>
<li>John</li>
<li>Mark</li>
</ul>
</details>
</ul>
</details>
</tr>
<tr>
<details>
<summary><b>Second Summary</b></summary>
<ul>
<details>
<summary><b>Groups</b></summary>
<ul>
<li>group A of Second</li>
<li>group B of Second</li>
<li>group C of Second</li>
</ul>
</details>
<details>
<summary><b>People</b></summary>
<ul>
<li>Alex</li>
</ul>
</details>
</ul>
</details>
</tr>
</table>
</body>
</html>
I want to use summaryText and groupText to filter elements from page. It could be just something like display:none .
The first input summaryText should works as normal filter. It means that if main summary (from first details in every tr element) consists String from summaryText - it should be display for user (all elements from this tr ), if doesn't consist - it should be hide for user (all elements from this tr ).
The Second input should filter by String in li elements from details with summary Groups . If there is any li with String from groupText - all elements from this tr should be display and if doesnt - should be hide for user.
Is there any way to search for details element by summary and then get parent tr and show/hide it or just use any else solution?
2 answers
solution1
1 2017-07-10 08:32:12
You could use this logic:
$("*:not(body)").each(function() {
if ($(this).html().indexOf("your phrase")>-1)
// String is found, your code here
});
solution2
0 ACCPTED 2017-07-10 08:34:26
Use the following to get an array of all the elements belonging to a particular tag:
var array=document.getElementsByTagName("summary");
Iterate this array using a simple for loop and search for a string inside that tag.
for(i=0;i<array.length;i++){
if(array[i].innerHTML.indexOf("word to search for") !== -1){
//do something here
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.