同时突出显示在 jquery 中找到的文本

Question

Here is the fiddle 我有数据表和搜索文本框。

如果我用这个词搜索它应该得到背景颜色为红色并且它工作正常......一旦我们搜索并从搜索文本框中删除文本，表格就会变得完全红色，它不应该发生。

我该如何解决这个问题？

$("#search").keyup(function(){
    _this = this;       
    $.each($("#ftz-table tbody tr"), function() {
        if(!($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)){
            $(this).css("background-color","red");
        }   
        else{
            //what to write here.....  
        }
    });
});

Answer 1

您没有检查搜索字段是否有任何值。并且所有行都被突出显示，因为所有行都包含""

$("#search").keyup(function() {
    _this = this;
    var inputValue = $(_this).val(); // extract in variable so we don't call for each row
    $.each($("#ftz-table tbody tr"), function() {
      // check if input string has any value before comparing values
      if (inputValue && $(this).text().toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) {
         $(this).css("background-color", "red");
      } else {
         $(this).css("background-color", "rgba(0,0,0,0.1)");
      }
    });
  });

fiddle

if (_this.val == "") 也不做任何事情。我假设你提到了_this.value 或$(this).val()。但是使用我的解决方案，您根本不需要这样做

Answer 2

检查一下这个小提琴，fiddle here

您必须首先在每个 keyup 上运行此代码：

$.each($("#ftz-table tbody tr"), function() { 
   $(this).css('background-color','rgba(0,0,0,0.1)'); 
})

如果字符串为空，您必须从函数中return。

片段：

$(document).ready(function() {
  $("#search").keyup(function() {
    _this = $(this);
    if (_this.val() == "") {
      $.each($("#ftz-table tbody tr"), function() {
        $(this).css('background-color', 'rgba(0,0,0,0.1)');
      })
      return;
    }
    $.each($("#ftz-table tbody tr"), function() {
      if (!($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)) {
        $(this).css("background-color", "red");
      } else {
        $(this).css("background-color", "rgba(0,0,0,0.1)");
      }
    });
  });
  $("#calculate").click(function() {
    var number = 0;
    var total = 0;
    var max = 1;
    $("#ftz-table tbody tr td:nth-child(3)").each(function() {
      var value = $(this).text();
      if (value != "") {
        total = total + parseInt(value);
        number++;
        if (value > max) {
          max = value;
        }
      }
    });
    $("#average").text("Average: " + (total / number));
    $("#max").text("Maximum: " + max);
    alert($("#search").val());
  });
  $("#main-checkbox").change(function() {
    var status = this.checked;
    $(".child-checkbox").each(function() {
      this.checked = status;
    });
  });
  $(".child-checkbox").change(function() {
    if (this.checked == false) {
      $("#main-checkbox")[0].checked = false;
    }
    if ($(".child-checkbox:checked").length == $(".child-checkbox").length) {
      $("#main-checkbox")[0].checked = true;
    }
  });
});

body {
  margin: auto;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: 1920px 974px;
}
.main-container {
  border: 0px solid none;
  height: 974px;
  width: 960px;
  margin: 0px auto;
  margin-top: -16px;
  font-family: trebuchet ms;
}
.login-nav {
  border: 0px solid white;
  height: 35px;
  margin-top: 0px;
}
.header {
  border: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  height: 64px;
  margin-top: 40px;
  outline: 1px solid #394B61;
  outline-offset: -5px;
}
.login-nav ul li a {
  text-decoration: none;
  color: white;
  padding-left: 2px;
  padding-right: 1px;
  font-family: trebuchet ms;
}
.banner {
  padding-top: 36px;
  border: 0px solid black;
  height: 162px;
  background-color: rgba(0, 0, 0, 0.5);
}
.banner h3 {
  padding-left: 32px;
  color: white;
  font-size: 40px;
  letter-spacing: 10px;
  font-family: century gothic;
  font-weight: normal;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
}
.body-container {
  background-color: rgba(0, 0, 0, 0.7);
  height: 550px;
}
.body-container div {
  width: 300px;
  padding-left: 20px;
  padding-top: 20px;
  float: left;
}
.header img {
  float: left;
  width: 200px;
  margin-top: -40px;
  margin-left: 5px;
  position: absolute;
}
p {
  color: white;
  font-size: 15px;
  margin-right: 20px;
  font-family: trebuchet MS;
}
.body-container a {
  color: skyblue;
  font-family: trebuchet MS;
  font-size: 15px;
}
.login-nav ul {
  float: right;
  background-color: rgba(0, 0, 0, 0.5);
  padding-left: 0px;
  margin-bottom: 0px;
}
.login-nav a {
  font-family: verdana;
  font-size: 13px;
}
.login-nav li {
  display: inline-block;
}
.nav-bar ul {
  float: right;
  margin-right: 10px;
}
.nav-bar li a:hover {
  background-color: #486881;
  border-radius: 5px;
}
.nav-bar li:after {
  content: "|";
  font-size: 20px;
  color: white;
}
.nav-bar li a {
  text-decoration: none;
  display: inline-block;
  margin-top: auto;
  color: skyblue;
  font-family: calibri;
  float: right;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 20px;
}
.nav-bar ul li:first-child:after {
  content: "";
}
.nav-bar li {
  list-style-type: none;
  float: left;
}
.services-body-container {
  margin-top: 44px;
  font-family: trebuchet MS;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.7);
}
.services-body-container div {
  display: inline-block;
  float: left;
}
.services-body-container div:first-child {
  width: 277px;
  padding-top: 30px;
  padding-left: 30px;
}
.services-text-container {
  width: 600px;
  height: 600px;
  padding-left: 25px;
}
.services-body-container div img {
  display: block;
  padding-bottom: 20px;
}
.services-body-container div:first-child ul {
  border-top: 1px solid #5E5F70;
  border-bottom: 1px solid #5E5F70;
  padding-left: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  list-style-type: none;
}
.services-body-container div:first-child ul a {
  color: skyblue;
}
.services-text-container p {
  font-size: 16px;
}
.services-text-container h3 {
  color: skyblue;
  font-weight: normal;
  font-size: 25px;
  font-family: trebuchet ms;
}
.services-text-container ul {
  color: white;
  text-align: justify;
  font-size: 15px;
}
.services-text-container p a {
  color: skyblue;
}
.request-container {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  height: 100px;
  width: 600px;
  margin-top: 20px;
  background-color: #10223A;
  font-weight: bold;
}
.request-container div {
  color: white;
  font-size: 15px;
  font-weight: normal;
}
#request-spacing {
  padding-top: 15px;
}
button {
  border-radius: 5px;
  background-color: #135E75;
  font-family: trebuchet ms;
  font-size: 15px;
  color: white;
  border-width: 0px;
  margin-top: 5px;
  padding-bottom: 5px;
}
#footer-links {
  color: white;
}
#footer-links a {
  color: white;
}
.request-container div {
  padding-top: 15px;
}
#footer {
  background: rgba(0, 0, 0, 0.4);
  color: #D4DBF3;
  height: 22px;
  text-align: center;
  margin-top: 10px;
}
#effect {
  outline: 1px solid #1D2D46;
  outline-offset: -7px;
}
table {
  color: white;
  font-family: segoe ui;
  border: 2px solid white;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid white;
  border-collapse: collapse;
  height: 35px;
  text-align: left;
}
.services-container {
  font-family: trebuchet MS;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.7);
  margin-top: 44px;
}
.table-search-container {
  width: 874px;
  margin: 0px auto;
}
.search-container {
  float: right;
  margin-top: 20px;
}
.search-container input {
  height: 22px;
}
.services-table-container {
  height: 446px;
  width: 875px;
  padding-top: 70px;
}
.services-table-container table {
  padding-top: 70px;
}
table th:first-child {
  width: 55px;
}
table th:nth-child(2) {
  width: 202px;
}
table th:nth-child(3) {
  width: 92px;
}
table th:nth-child(4) {
  width: 290px;
}
table th:nth-child(5) {
  width: 240px;
}
.styled-box {
  border: 2px solid white;
}
.button-container button {
  border-radius: 0px;
  font-family: segoe ui;
  font-weight: normal;
}
table tr:last-child {
  height: 120px;
}
.element-align {
  padding-left: 10px;
}
#average,
#max {
  padding-left: 80px;
  color: white;
  font-family: segoe ui;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-container">
  <div class="login-nav">
    <ul>
      <li><a href="" target="_blank">Request a Quote |</a>
      </li>
      <li><a href="" target="_blank">Client Login |</a>
      </li>
      <li><a href="" target="_blank">Vehicle Export Portal</a>
      </li>
    </ul>
  </div>
  <div class="header">
    <img src="logo.png">
    <div class="nav-bar">
      <ul>
        <li><a href="Task2.html">HOME</a>
        </li>
        <li><a href="">ABOUT FTZWS</a>
        </li>
        <li><a href="services.html">OUR SERVICES</a>
        </li>
        <li><a href="">OUR CLIENTS</a>
        </li>
        <li><a href="">CONTACT US</a>
        </li>
      </ul>
    </div>
  </div>
  <div id="effect" class="services-container">
    <div class="table-search-container">
      <div class="search-container">
        <input type="text" id="search" placeholder="search" />
      </div>
      <div class="services-table-container">
        <table id="ftz-table">
          <tr>
            <th>
              <input id="main-checkbox" type="checkbox" value="" />
            </th>
            <th class="element-align">NAME</th>
            <th class="element-align">SCORE</th>
            <th class="element-align">EMAIL</th>
            <th></th>
          </tr>
          <tr>
            <td>
              <input class="child-checkbox" type="checkbox" value="" />
            </td>
            <td id="element" class="element-align">Vijay Prakash</td>
            <td id="element" class="element-align">50</td>
            <td id="element" class="element-align">vijay@technovert.com</td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input class="child-checkbox" type="checkbox" value="" />
            </td>
            <td id="element" class="element-align">Sashi Pagadala</td>
            <td id="element" class="element-align">90</td>
            <td id="element" class="element-align">sashi@technovert.com</td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="button-container">
        <button id="calculate">Calculate</button>
        <span id="average"></span>
        <span id="max"></span>
      </div>
    </div>
  </div>
  <div id="footer">
    Copyright ©2014 FTZ World Services. All Rights Reserved.
    <span id="footer-links">
				<a href="">Contact Us</a>  |
				<a href="">Request a Quote</a>
				</span>
  </div>