我想从姓名和国家数值中搜索

huangapple
go评论98阅读模式
英文:

I want to search from both Name and Country values

问题

我想在“Name”和“Country”值列上使用文本过滤器进行搜索，但现在我只能在一列上进行搜索。我该如何更改tr[i].getElementsByTagName('td')[0]的值以同时过滤这两列？

我会很高兴如果你可以帮助我。

  1. <!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-html -->
  4.     <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  6.     <table id="myTable">
  7.       <tr class="header">
  8.         <th style="width:60%;">Name</th>
  9.         <th style="width:40%;">Country</th>
  10.       </tr>
  11.       <tr>
  12.         <td>Alfreds Futterkiste</td>
  13.         <td>Germany</td>
  14.       </tr>
  15.       <tr>
  16.         <td>Berglunds snabbkop</td>
  17.         <td>Sweden</td>
  18.       </tr>
  19.       <tr>
  20.         <td>Island Trading</td>
  21.         <td>UK</td>
  22.       </tr>
  23.       <tr>
  24.         <td>Koniglich Essen</td>
  25.         <td>Germany</td>
  26.       </tr>
  27.     </table>
  28.     <script>
  29.     function myFunction() {
  30.       // 声明变量
  31.       var input, filter, table, tr, td, i, txtValue;
  32.       input = document.getElementById("myInput");
  33.       filter = input.value.toUpperCase();
  34.       table = document.getElementById("myTable");
  35.       tr = table.getElementsByTagName("tr");
  37.       // 循环遍历所有表格行，并隐藏不匹配搜索查询的行
  38.       for (i = 0; i < tr.length; i++) {
  39.         td = tr[i].getElementsByTagName("td")[0]; // 这里是你要更改的地方
  40.         if (td) {
  41.           txtValue = td.textContent || td.innerText;
  42.           if (txtValue.toUpperCase().indexOf(filter) > -1) {
  43.             tr[i].style.display = "";
  44.           } else {
  45.             tr[i].style.display = "none";
  46.           }
  47.         }
  48.       }
  49.     }
  50.     </script>
  52. <!-- 结束代码片段 -->
英文:

I want to search on the Name and Country values ​​columns with the text filter, but now I can only search on one column. How can I change the value of tr[i].getElementsByTagName(&#39;td&#39;)[0] to filter on both columns?

I'll be happy if you can help me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;input type=&quot;text&quot; id=&quot;myInput&quot; onkeyup=&quot;myFunction()&quot; placeholder=&quot;Search for names..&quot;&gt;
  2. &lt;table id=&quot;myTable&quot;&gt;
  3. &lt;tr class=&quot;header&quot;&gt;
  4. &lt;th style=&quot;width:60%;&quot;&gt;Name&lt;/th&gt;
  5. &lt;th style=&quot;width:40%;&quot;&gt;Country&lt;/th&gt;
  6. &lt;/tr&gt;
  7. &lt;tr&gt;
  8. &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
  9. &lt;td&gt;Germany&lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;tr&gt;
  12. &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
  13. &lt;td&gt;Sweden&lt;/td&gt;
  14. &lt;/tr&gt;
  15. &lt;tr&gt;
  16. &lt;td&gt;Island Trading&lt;/td&gt;
  17. &lt;td&gt;UK&lt;/td&gt;
  18. &lt;/tr&gt;
  19. &lt;tr&gt;
  20. &lt;td&gt;Koniglich Essen&lt;/td&gt;
  21. &lt;td&gt;Germany&lt;/td&gt;
  22. &lt;/tr&gt;
  23. &lt;/table&gt;
  24. &lt;script&gt;
  25. function myFunction() {
  26. // Declare variables
  27. var input, filter, table, tr, td, i, txtValue;
  28. input = document.getElementById(&quot;myInput&quot;);
  29. filter = input.value.toUpperCase();
  30. table = document.getElementById(&quot;myTable&quot;);
  31. tr = table.getElementsByTagName(&quot;tr&quot;);
  32. // Loop through all table rows, and hide those who don&#39;t match the search query
  33. for (i = 0; i &lt; tr.length; i++) {
  34. td = tr[i].getElementsByTagName(&quot;td&quot;)[0];
  35. if (td) {
  36. txtValue = td.textContent || td.innerText;
  37. if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
  38. tr[i].style.display = &quot;&quot;;
  39. } else {
  40. tr[i].style.display = &quot;none&quot;;
  41. }
  42. }
  43. }
  44. }
  45. &lt;/script&gt;

<!-- end snippet -->

答案1

得分: 1

你可以选择两个字段并要求它与任何一个匹配。

  1. <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索姓名或国家..">
  2. <table id="myTable">
  3.     <tr class="header">
  4.         <th style="width:60%;">姓名</th>
  5.         <th style="width:40%;">国家</th>
  6.     </tr>
  7.     <tr>
  8.         <td>Alfreds Futterkiste</td>
  9.         <td>德国</td>
  10.     </tr>
  11.     <tr>
  12.         <td>Berglunds snabbkop</td>
  13.         <td>瑞典</td>
  14.     </tr>
  15.     <tr>
  16.         <td>Island Trading</td>
  17.         <td>英国</td>
  18.     </tr>
  19.     <tr>
  20.         <td>Koniglich Essen</td>
  21.         <td>德国</td>
  22.     </tr>
  23. </table>
  24. <script>
  25.     // 声明变量
  26.     var input, filter, table, tr, tdName, tdCountry, i, txtValueName, txtValueCountry;
  27.     input = document.getElementById("myInput");
  28.     table = document.getElementById("myTable");
  29.     tr = table.getElementsByTagName("tr");
  31.     // 初始隐藏所有表格行
  32.     for (i = 0; i < tr.length; i++) {
  33.         if (tr[i].classList.contains('header')) {
  34.             continue;
  35.         }
  36.         tr[i].style.display = "none";
  37.     }
  39.     function myFunction() {
  40.         filter = input.value.toUpperCase();
  42.         // 遍历所有表格行，并隐藏那些不匹配搜索查询的姓名或国家列
  43.         for (i = 0; i < tr.length; i++) {
  44.             tdName = tr[i].getElementsByTagName("td")[0];
  45.             tdCountry = tr[i].getElementsByTagName("td")[1];
  46.             if (tdName && tdCountry) {
  47.                 txtValueName = tdName.textContent || tdName.innerText;
  48.                 txtValueCountry = tdCountry.textContent || tdCountry.innerText;
  49.                 if (txtValueName.toUpperCase().indexOf(filter) > -1 || txtValueCountry.toUpperCase().indexOf(filter) > -1) {
  50.                     tr[i].style.display = "";
  51.                 } else {
  52.                     tr[i].style.display = "none";
  53.                 }
  54.             }
  55.         }
  56.     }
  57. </script>
英文:

You can select both fields and ask it to match against either.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
// Declare variables
var input, filter, table, tr, tdName, tdCountry, i, txtValueName, txtValueCountry;
input = document.getElementById("myInput");
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

  1. // Hide all table rows initially
  2. for (i = 0; i &lt; tr.length; i++) {
  3. if (tr[i].classList.contains(&#39;header&#39;)) {
  4. continue;
  5. }
  6. tr[i].style.display = &quot;none&quot;;
  7. }
  8. function myFunction() {
  9. filter = input.value.toUpperCase();
  10. // Loop through all table rows, and hide those that don&#39;t match the search query in either the Name or Country column
  11. for (i = 0; i &lt; tr.length; i++) {
  12. tdName = tr[i].getElementsByTagName(&quot;td&quot;)[0];
  13. tdCountry = tr[i].getElementsByTagName(&quot;td&quot;)[1];
  14. if (tdName &amp;&amp; tdCountry) {
  15. txtValueName = tdName.textContent || tdName.innerText;
  16. txtValueCountry = tdCountry.textContent || tdCountry.innerText;
  17. if (txtValueName.toUpperCase().indexOf(filter) &gt; -1 || txtValueCountry.toUpperCase().indexOf(filter) &gt; -1) {
  18. tr[i].style.display = &quot;&quot;;
  19. } else {
  20. tr[i].style.display = &quot;none&quot;;
  21. }
  22. }
  23. }
  24. }

</script>

<!-- end snippet -->

答案2

得分: 1

尝试这个,

  1. <script>
  2. function myFunction() {
  3.   // 声明变量
  4.   var input, filter, table, tr, td, td1, i, txtValue, txtValue1;
  5.   input = document.getElementById("myInput");
  6.   filter = input.value.toUpperCase();
  7.   table = document.getElementById("myTable");
  8.   tr = table.getElementsByTagName("tr");
  10.   // 循环遍历所有表格行，并隐藏不匹配搜索查询的行
  11.   for (i = 0; i < tr.length; i++) {
  12.     td = tr[i].getElementsByTagName("td")[0];
  13.     td1 = tr[i].getElementsByTagName("td")[1];
  15.     if (td) {
  16.       txtValue = td.textContent || td.innerText;
  17.       txtValue1 = td1.textContent || td1.innerText;
  18.       console.log(txtValue1);
  19.       if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {
  20.         tr[i].style.display = "";
  21.       } else {
  22.         tr[i].style.display = "none";
  23.       }
  24.     }
  25.   }
  26. }
  27. </script>

注意：我已经移除了 HTML 编码字符（如 &lt; 和 &quot;）并将其替换为正常的 HTML 标签和引号。

英文:

Try this,

  1. &lt;script&gt;
  2. function myFunction() {
  3. // Declare variables
  4. var input, filter, table, tr, td, i, txtValue,txtValue1;
  5. input = document.getElementById(&quot;myInput&quot;);
  6. filter = input.value.toUpperCase();
  7. table = document.getElementById(&quot;myTable&quot;);
  8. tr = table.getElementsByTagName(&quot;tr&quot;);
  9. // Loop through all table rows, and hide those who don&#39;t match the search query
  10. for (i = 0; i &lt; tr.length; i++) {
  11. td = tr[i].getElementsByTagName(&quot;td&quot;)[0];
  12. td1 = tr[i].getElementsByTagName(&quot;td&quot;)[1];
  13. if (td) {
  14. txtValue =  td.textContent || td.innerText ;
  15. txtValue1 =  td1.textContent || td1.innerText ;
  16. console.log(txtValue1);
  17. if (txtValue.toUpperCase().indexOf(filter) &gt; -1 || txtValue1.toUpperCase().indexOf(filter) &gt; -1) {
  18. tr[i].style.display = &quot;&quot;;
  19. } else {
  20. tr[i].style.display = &quot;none&quot;;
  21. }
  22. }
  23. }
  24. }
  25. &lt;/script&gt;

答案3

得分: 1

我采用了一个更简单的方法。

假设你想搜索 tr 元素的内容。我在文本内容中使用 includes 函数来查找筛选条件。我使用这个结果来切换 tr 上的一个类。

CSS 类将显示设置为 block，同时我还使用 CSS 将 TR 默认设置为 display:none。

  1. <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  3. <table id="myTable">
  4.   <tr class="header">
  5.     <th style="width:60%;">Name</th>
  6.     <th style="width:40%;">Country</th>
  7.   </tr>
  8.   <tr>
  9.     <td>Alfreds Futterkiste</td>
  10.     <td>Germany</td>
  11.   </tr>
  12.   <tr>
  13.     <td>Berglunds snabbkop</td>
  14.     <td>Sweden</td>
  15.   </tr>
  16.   <tr>
  17.     <td>Island Trading</td>
  18.     <td>UK</td>
  19.   </tr>
  20.   <tr>
  21.     <td>Koniglich Essen</td>
  22.     <td>Germany</td>
  23.   </tr>
  24. </table>
  1. const input = document.getElementById("myInput");
  2. const table = document.getElementById("myTable");
  3. const trs = table.querySelectorAll("tr:not(.header)");
  5. function myFunction() {  
  6.   const filter = input.value.toUpperCase();
  7.   trs.forEach((tr) => {
  8.       tr.classList.toggle("active", (filter != "" && tr.textContent.toUpperCase().includes(filter)))
  9.   });
  10. }
  1. tr:not(.header) {
  2.   display: none;
  3. }
  5. tr.active {
  6.   display: block;
  7. }
英文:

I went with a simpler approach.

Assuming, you want to search the content of the tr itself. I'm looking in the text content for the filter using the includes function. I use the return of that to toggle a class on the tr.

The CSS class sets the display to block, while I also use CSS to set TR to display none by default.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const input = document.getElementById(&quot;myInput&quot;);
  2. const table = document.getElementById(&quot;myTable&quot;);
  3. const trs = table.querySelectorAll(&quot;tr:not(.header)&quot;);
  4. function myFunction() {  
  5. const filter = input.value.toUpperCase();
  6. trs.forEach((tr) =&gt; {
  7. tr.classList.toggle(&quot;active&quot;,(filter != &quot;&quot; &amp;&amp; tr.textContent.toUpperCase().includes(filter)))
  8. });
  9. }

<!-- language: lang-css -->

  1. tr:not(.header){display:none}
  2. tr.active{display:block}

<!-- language: lang-html -->

  1. &lt;input type=&quot;text&quot; id=&quot;myInput&quot; onkeyup=&quot;myFunction()&quot; placeholder=&quot;Search for names..&quot;&gt;
  2. &lt;table id=&quot;myTable&quot;&gt;
  3. &lt;tr class=&quot;header&quot;&gt;
  4. &lt;th style=&quot;width:60%;&quot;&gt;Name&lt;/th&gt;
  5. &lt;th style=&quot;width:40%;&quot;&gt;Country&lt;/th&gt;
  6. &lt;/tr&gt;
  7. &lt;tr&gt;
  8. &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
  9. &lt;td&gt;Germany&lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;tr&gt;
  12. &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
  13. &lt;td&gt;Sweden&lt;/td&gt;
  14. &lt;/tr&gt;
  15. &lt;tr&gt;
  16. &lt;td&gt;Island Trading&lt;/td&gt;
  17. &lt;td&gt;UK&lt;/td&gt;
  18. &lt;/tr&gt;
  19. &lt;tr&gt;
  20. &lt;td&gt;Koniglich Essen&lt;/td&gt;
  21. &lt;td&gt;Germany&lt;/td&gt;
  22. &lt;/tr&gt;
  23. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月5日 14:27:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76403966.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定