blocks|key|2573819|text|这里有几个错误：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2573820|1.+for循环无效：|2573821|for+(j+=+0;+j+<+tr.width;+j%2B%2B)|CODE|2573822|没有tr.width这样的东西。或者更确切地说，它是一个jQuery函数，所以当您输入tr.width时，您会得到它的文本。|2573823|因此，脚本会中断，因为for+loop子句无效。|2573824|如果你真的像这样调用tr.width()，你会得到元素的像素宽度，所以它对你也没什么帮助。|2573825|您需要的是其中的<td>计数。下面是你获得它的方法：|2573826|let+rowTds+=+tr[i].getElementsByTagName("td")
for+(j+=+0;+j+<+rowTds.length;+j%2B%2B){...}|code-block|syntax|javascript|2573827|现在您可以遍历行中的所有<td>s。|2573828|2.隐藏行逻辑需要修改为多列检查：|2573829|现在您还需要更改隐藏的逻辑，因为如果最后一个<td>与筛选器字符串不匹配，它将继续隐藏一行。|2573830|td+=+tr[i].getElementsByTagName("td")[j];
++++if+(td)+{
++++++if+(td.innerHTML.toUpperCase().indexOf(filter)+>+-1)+{
++++++++tr[i].style.display+=+"";
++++++++break;+//+this+will+break+the+row+looping+on+j+after+making+the+row+visible.
++++++++}+else+{
++++++++++++tr[i].style.display+=+"none";
++++++++++}
++++++++}
++++++}
++++}
++}|2573831|结论:从W3schools教程中调整的完整工作代码：|2573832|链接：https://www.w3schools.com/code/tryit.asp?filename=FVXZWZMELE1Q|2573833|<!DOCTYPE+html>
<html>
<head>
<meta+name="viewport"+content="width=device-width,+initial-scale=1">
<script
++src="https://code.jquery.com/jquery-3.3.1.min.js"
++integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
++crossorigin="anonymous"></script>
<style>
*+{
++box-sizing:+border-box;
}

#myInput+{
++background-image:+url('/css/searchicon.png');
++background-position:+10px+10px;
++background-repeat:+no-repeat;
++width:+100%25;
++font-size:+16px;
++padding:+12px+20px+12px+40px;
++border:+1px+solid+#ddd;
++margin-bottom:+12px;
}

#myTable+{
++border-collapse:+collapse;
++width:+100%25;
++border:+1px+solid+#ddd;
++font-size:+18px;
}

#myTable+th,+#myTable+td+{
++text-align:+left;
++padding:+12px;
}

#myTable+tr+{
++border-bottom:+1px+solid+#ddd;
}

#myTable+tr.header,+#myTable+tr:hover+{
++background-color:+#f1f1f1;
}
</style>
</head>
<body>

<h2>My+Customers</h2>

<input+type="text"+id="myInput"+onkeyup="myFunction()"+placeholder="Search+for+names.."+title="Type+in+a+name">

<table+id="myTable">
++<tr+class="header">
++++<th+style="width:60%25;">Name</th>
++++<th+style="width:40%25;">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>
++<tr>
++++<td>Laughing+Bacchus+Winecellars</td>
++++<td>Canada</td>
++</tr>
++<tr>
++++<td>Magazzini+Alimentari+Riuniti</td>
++++<td>Italy</td>
++</tr>
++<tr>
++++<td>North/South</td>
++++<td>UK</td>
++</tr>
++<tr>
++++<td>Paris+specialites</td>
++++<td>France</td>
++</tr>
</table>

<script>
function+myFunction()+{
++var+input,+filter,+table,+tr,+td,+i;
++input+=+document.getElementById("myInput");
++filter+=+input.value.toUpperCase();
++table+=+document.getElementById("myTable");
++tr+=+table.getElementsByTagName("tr");
++for+(i+=+0;+i+<+tr.length;+i%2B%2B)+{
++++let+rowTds+=+tr[i].getElementsByTagName("td")
++++for+(j+=+0;+j+<+rowTds.length;+j%2B%2B){
++++++td+=+tr[i].getElementsByTagName("td")[j];
++++++if+(td)+{
++++++++if+(td.innerHTML.toUpperCase().indexOf(filter)+>+-1)+{
++++++++++tr[i].style.display+=+"";
++++++++++break;
++++++++}+else+{
++++++++++tr[i].style.display+=+"none";
++++++++}
++++++}
++++}+++++++
++}
}
</script>

</body>
</html>|2573834|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/code/tryit.asp?filename=FVXZWZMELE1Q^0|0|8|0|0|0|U|0|2|8|17|8|0|B|8|0|A|A|0|8|4|0|0|C|5|0|0|M|4|0|0|0|3|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1M|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1N|8|@$9|1O|A|1P|B|J]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1Q|8|@$9|1R|A|1S|B|J]|$9|1T|A|1U|B|J]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1V|8|@$9|1W|A|1X|B|J]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1Y|8|@$9|1Z|A|20|B|J]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|21|8|@$9|22|A|23|B|J]]|D|@]|E|$]]|$1|S|3|T|5|U|7|24|8|@]|D|@]|E|$V|W]]|$1|X|3|Y|5|6|7|25|8|@$9|26|A|27|B|J]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|28|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|29|8|@$9|2A|A|2B|B|J]]|D|@]|E|$]]|$1|13|3|14|5|U|7|2C|8|@]|D|@]|E|$V|W]]|$1|15|3|16|5|6|7|2D|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|2E|8|@]|D|@$9|2F|A|2G|1|2H]]|E|$]]|$1|19|3|1A|5|U|7|2I|8|@]|D|@]|E|$V|W]]|$1|1B|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]]]

<p><strong>You have a couple of errors there:</strong></p>
<h3>1. invalid for loop:</h3>
<p><code>for (j = 0; j &lt; tr.width; j++)</code></p>
<p>There's no such thing as <code>tr.width</code>. Or rather it's a jQuery function, so you're getting a text of it when you type <code>tr.width</code>.</p>
<p>Thus the script breaks, since the <code>for loop</code> clause if invalid.</p>
<p>If you actually called  like this <code>tr.width()</code> you would get the <em>pixel</em> width of the element so it wouldn't help you either.</p>
<p>What you need is the <code>&lt;td&gt;</code> count in it. Here's how you get it:</p>
<pre><code>let rowTds = tr[i].getElementsByTagName(&quot;td&quot;)
for (j = 0; j &lt; rowTds.length; j++){...}
</code></pre>
<p>now you can iterate through the all the <code>&lt;td&gt;s</code> in the row.</p>
<h3>2. Hide row logic needs revision to multiple column check:</h3>
<p>Now you also need to change the logic of the hiding because it will keep hiding a row if the the last <code>&lt;td&gt;</code> didn't match the filter string.</p>
<pre><code>td = tr[i].getElementsByTagName(&quot;td&quot;)[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
        tr[i].style.display = &quot;&quot;;
        break; // this will break the row looping on j after making the row visible.
        } else {
            tr[i].style.display = &quot;none&quot;;
          }
        }
      }
    }
  }
</code></pre>
<h3>Conclusion: Full working code adjusted from the W3schools tutorial:</h3>
<p>Link: <a href="https://www.w3schools.com/code/tryit.asp?filename=FVXZWZMELE1Q" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FVXZWZMELE1Q</a></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;script
  src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;
  integrity=&quot;sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=&quot;
  crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;style&gt;
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;My Customers&lt;/h2&gt;

&lt;input type=&quot;text&quot; id=&quot;myInput&quot; onkeyup=&quot;myFunction()&quot; placeholder=&quot;Search for names..&quot; title=&quot;Type in a name&quot;&gt;

&lt;table id=&quot;myTable&quot;&gt;
  &lt;tr class=&quot;header&quot;&gt;
    &lt;th style=&quot;width:60%;&quot;&gt;Name&lt;/th&gt;
    &lt;th style=&quot;width:40%;&quot;&gt;Country&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
    &lt;td&gt;Germany&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
    &lt;td&gt;Sweden&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Island Trading&lt;/td&gt;
    &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Koniglich Essen&lt;/td&gt;
    &lt;td&gt;Germany&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
    &lt;td&gt;Canada&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
    &lt;td&gt;Italy&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;North/South&lt;/td&gt;
    &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Paris specialites&lt;/td&gt;
    &lt;td&gt;France&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;script&gt;
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById(&quot;myInput&quot;);
  filter = input.value.toUpperCase();
  table = document.getElementById(&quot;myTable&quot;);
  tr = table.getElementsByTagName(&quot;tr&quot;);
  for (i = 0; i &lt; tr.length; i++) {
    let rowTds = tr[i].getElementsByTagName(&quot;td&quot;)
    for (j = 0; j &lt; rowTds.length; j++){
      td = tr[i].getElementsByTagName(&quot;td&quot;)[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = &quot;&quot;;
          break;
        } else {
          tr[i].style.display = &quot;none&quot;;
        }
      }
    }       
  }
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


<p>I've got a table of records and I've got a text field above it which dynamically filters the records on a specific table column. I implemented it following this handy How-To <a href="https://www.w3schools.com/howto/howto_js_filter_table.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_filter_table.asp</a></p>

<p>Now, this works as advertised, but I'm looking to modify it so that the filter looks at all columns, not just one of them. In the example from the How-To, I'd like to be able to type a name or a country and for it to return all matches. I tried to do this in the JavaScript:</p>

<pre><code>function myFunction() {   
// Declare variables   
var input, filter, table, tr, td, i;   
input = document.getElementById("myInput");   
filter = input.value.toUpperCase();   
table = document.getElementById("myTable");   
tr = table.getElementsByTagName("tr");


  // Loop through all table rows, and hide those who don't match the search query   
for (i = 0; i &lt; tr.length; i++) {
  for (j = 0; j &lt; tr.width; j++) {
    td = tr[i].getElementsByTagName("td")[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
        tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
          }}}}}
</code></pre>

<p>The j variable is where I had hoped to additionally loop through the columns for each i, but doing this seems to break the filtering functionality, ie. typing anything has no effect on the records displayed - all records show at all times. Can someone tell me what I'm doing wrong?</p>


Filtering a table with text field with JavaScript on all columns

我有一个记录表，在它上面有一个文本字段，它动态地过滤特定表列上的记录。我按照这个简单的How-To 实现了它现在，这可以像广告中所说的那样工作，但我希望对其进行修改，以便筛选器可以查看所有列，而不仅仅是其中的一列。在How-To中的示例中，我希望能够键入一个名称或国家，并返回所有匹配项。我试着在JavaScript中这...

问筛选包含文本字段且所有列均为JavaScript的表
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问筛选包含文本字段且所有列均为JavaScript的表EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问筛选包含文本字段且所有列均为JavaScript的表
EN