entityMap|blocks|key|bolfs|text|正如@rickdenhaan在他的评论中建议的那样，你可以在jQuery中使用:visible选择器，为当前可见的偶数行和奇数行提供不同的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6apsd|试着这样做：|apa0c|$(document).ready(function(){
++$("#mySearchbar").on("keyup",+function()+{
++++var+value+=+$(this).val().toLowerCase();
++++$("#myTable+tr:not(.th)").filter(function()+{
++++++$(this).toggle($(this).text().toLowerCase().indexOf(value)+>+-1)
++++});
++++//+re-setting+bg+color+based+on+visibility+
++++$("#myTable+tr:not(.th)").filter(":visible").each(function(index)+{++
++++++$(this).css("background-color",+(+index%252+?+"#FFFFFF"+:+"#CCCCCC"+));
++++});
++});
});|code-block|syntax|javascript|ft5pi|我希望它能有所帮助:)|70k6u^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|O|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|P|9|@]|A|@]|B|$]]|$2|L|4|-4|6|7|8|Q|9|@]|A|@]|B|$]]]]

<p>As @rickdenhaan suggested in his comment you can use :visible selector with jQuery to give different color to even and odd rows that are currently visible.</p>

<p>Try like this:</p>

<pre><code>$(document).ready(function(){
  $("#mySearchbar").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not(.th)").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
    });
    // re-setting bg color based on visibility 
    $("#myTable tr:not(.th)").filter(":visible").each(function(index) {  
      $(this).css("background-color", ( index%2 ? "#FFFFFF" : "#CCCCCC" ));
    });
  });
});
</code></pre>

<p>I hope it helps :)</p>


entityMap|blocks|key|4dt9j|text|这是一个带有注释的香草口味的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3r429|(设置style属性的display属性可能比设置line-height慢，但可以避免考虑仅使用空格的节点。)|offset|length|style|CODE|9gj0|​|n7bh|//+Identifiers
const+rows+=+document.querySelectorAll("#myTable+TR:not(.th)"),
++++++searchbar+=+document.getElementById("mySearchbar");
let+searchString;

//+Listener
searchbar.addEventListener("keyup",+function(){
++
++//+Binds+`searchString`+to+the+input's+current+value+
++searchString+=+event.target.value.trim().toLowerCase();
++
++//+Applies+the+"displayed"+CSS+class+to+rows+containing+the+search+string
++[...rows].forEach(row+=>+{+//+The+spread+operator+gives+us+a+proper+Array
++++if(row.textContent.toLowerCase().indexOf(searchString)+>+-1){
++++++row.classList.add("displayed");+}
++++else{
++++++row.classList.remove("displayed");
++++}
++});

++//+Applies+alternating+background+colors+to+the+displayed+rows
++[...rows].filter(row+=>+row.classList.contains("displayed"))
+++++++++++.forEach((displayedRow,+index)+=>+{
++++++++++++++//+Uses+the+modulo+operator+(on+the+index+of+each+row+in+the+filtered+array)
++++++++++++++//+++to+set+the+condition+in+the+ternary+operator+to+set+background+color
++++++++++++++displayedRow.style.backgroundColor+=+
++++++++++++++++index+%25+2+==+0+?+"#DDDDDD"+:+"#BBBBBB";
++});
});|code-block|syntax|javascript|cpfs8|tr.th+{
++background-color:+#888888;
++color:+#FFFFFF
}
td+{
++padding-right:+1ch;
++padding-left:+1ch;
}

tr.displayed{
++/*+Use+default+display+style+for+displayed+rows+*/
++display:+;
}

tr:not(.th):not(.displayed){
++display:+none;
}

/*+A+possibly+faster+alternative:+
++tr.displayed+td+{
++++font-size:+1em;
++++line-height:+1em;
++}
++tr:not(.th):not(.displayed)+td+{
++++font-size:+0;
++++line-height:+0;
++}
*/|8402d|<input+id="mySearchbar"+/>
<table+id="myTable">
++<tr+class="th"><td>Col1</td><td>Col2</td><td>Col3</td></tr>
++<tr+class="displayed"><td>The+</td><td>quick</td><td>brown</td></tr>
++<tr+class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
++<tr+class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
++<tr+class="displayed"><td>The</td><td>quick</td><td>brown</td></tr>
++<tr+class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
++<tr+class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
++<tr+class="displayed"><td>The</td><td>quick</td><td>brown</td></tr>
++<tr+class="displayed"><td>fox</td><td>jumps</td><td>over</td></tr>
++<tr+class="displayed"><td>the</td><td>lazy</td><td>dog.</td></tr>
</table>|9ellf|610ei^0|0|B|7|P|B|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|V|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|W|9|@$E|X|F|Y|G|H]|$E|Z|F|10|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|11|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|12|9|@]|A|@]|B|$N|O]]|$2|P|4|Q|6|M|8|13|9|@]|A|@]|B|$N|O]]|$2|R|4|S|6|M|8|14|9|@]|A|@]|B|$N|O]]|$2|T|4|J|6|7|8|15|9|@]|A|@]|B|$]]|$2|U|4|-4|6|7|8|16|9|@]|A|@]|B|$]]]]

<p>Here's a vanilla-flavored solution with comments.</p>

<p>(Setting the style attribute's <code>display</code> property may be slower than setting <code>line-height</code>, but avoids needing to account for whitespace-only nodes.)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Identifiers
const rows = document.querySelectorAll("#myTable TR:not(.th)"),
      searchbar = document.getElementById("mySearchbar");
let searchString;

// Listener
searchbar.addEventListener("keyup", function(){
  
  // Binds `searchString` to the input's current value 
  searchString = event.target.value.trim().toLowerCase();
  
  // Applies the "displayed" CSS class to rows containing the search string
  [...rows].forEach(row =&gt; { // The spread operator gives us a proper Array
    if(row.textContent.toLowerCase().indexOf(searchString) &gt; -1){
      row.classList.add("displayed"); }
    else{
      row.classList.remove("displayed");
    }
  });

  // Applies alternating background colors to the displayed rows
  [...rows].filter(row =&gt; row.classList.contains("displayed"))
           .forEach((displayedRow, index) =&gt; {
              // Uses the modulo operator (on the index of each row in the filtered array)
              //   to set the condition in the ternary operator to set background color
              displayedRow.style.backgroundColor = 
                index % 2 == 0 ? "#DDDDDD" : "#BBBBBB";
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>tr.th {
  background-color: #888888;
  color: #FFFFFF
}
td {
  padding-right: 1ch;
  padding-left: 1ch;
}

tr.displayed{
  /* Use default display style for displayed rows */
  display: ;
}

tr:not(.th):not(.displayed){
  display: none;
}

/* A possibly faster alternative: 
  tr.displayed td {
    font-size: 1em;
    line-height: 1em;
  }
  tr:not(.th):not(.displayed) td {
    font-size: 0;
    line-height: 0;
  }
*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="mySearchbar" /&gt;
&lt;table id="myTable"&gt;
  &lt;tr class="th"&gt;&lt;td&gt;Col1&lt;/td&gt;&lt;td&gt;Col2&lt;/td&gt;&lt;td&gt;Col3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;The &lt;/td&gt;&lt;td&gt;quick&lt;/td&gt;&lt;td&gt;brown&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;fox&lt;/td&gt;&lt;td&gt;jumps&lt;/td&gt;&lt;td&gt;over&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;the&lt;/td&gt;&lt;td&gt;lazy&lt;/td&gt;&lt;td&gt;dog.&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;The&lt;/td&gt;&lt;td&gt;quick&lt;/td&gt;&lt;td&gt;brown&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;fox&lt;/td&gt;&lt;td&gt;jumps&lt;/td&gt;&lt;td&gt;over&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;the&lt;/td&gt;&lt;td&gt;lazy&lt;/td&gt;&lt;td&gt;dog.&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;The&lt;/td&gt;&lt;td&gt;quick&lt;/td&gt;&lt;td&gt;brown&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;fox&lt;/td&gt;&lt;td&gt;jumps&lt;/td&gt;&lt;td&gt;over&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="displayed"&gt;&lt;td&gt;the&lt;/td&gt;&lt;td&gt;lazy&lt;/td&gt;&lt;td&gt;dog.&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I created a page which grabs data from a database and outputted the data in a table. I wanted a live search for my table so the script below is what I've found on the internet.</p>

<p>Now the odd and even styling are in CSS. If I search the table the styling is weird because it's applying the styling from the beginning, and not the styling after searching.</p>

<p>The issue: I have multiple tr's with the same color after searching</p>

<p>Script:</p>

<pre><code>$(document).ready(function(){
  $("#mySearchbar").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not(.th)").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
    });
  });
});
</code></pre>

<p>CSS:</p>

<pre><code>  tr:nth-child(odd) {
    background-color: #CCCCCC;
  }

  tr:nth-child(even) {
    background-color: #FFFFFF;
}
</code></pre>


How to apply odd and even on a live search table?

数据库

jQuery

 我创建了一个从数据库获取数据的页面，并将数据输出到一个表中。我想对我的桌子进行实时搜索，所以下面的脚本是我在互联网上找到的。 现在CSS中使用了奇数和偶数样式。如果我搜索表，样式会很奇怪，因为它从一开始就应用样式，而不是搜索后的样式。 问题:在搜索后，我有多个相同颜色的tr 脚本： $(document).ready...

问如何在实时搜索表上应用奇偶运算？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在实时搜索表上应用奇偶运算？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在实时搜索表上应用奇偶运算？
EN