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.....
}
});
});
答案 0 :(得分：0)
检查这个小提琴，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>
答案 1 :(得分：0)
您没有检查搜索字段是否有任何值。并且所有行都会突出显示，因为所有行都包含""
$("#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)");
}
});
});
if (_this.val == "")也没有做任何事情。我假设你_this.value或$(this).val()。但是根据我的解决方案，你根本不需要它