私はデータと検索テキストボックスを持つテーブルを持っているjqueryの

Question

Here is the fiddleで見つかったテキストをハイライトしながら。

私はそれが赤とその作業罰金...私たちは検索やテーブルはそれが起こるべきではありません完全に赤になっている検索テキストボックスからテキストを削除した後のように背景色を取得する必要があります単語で検索した場合。

どうすればこの問題を解決できますか？それぞれが最初自体keyUpイベントで

$("#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

チェックこのフィドルアウト、fiddle here

あなたはこのコードを実行する必要があります。

$.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"> 
 
\t \t \t \t <a href="">Contact Us</a> | 
 
\t \t \t \t <a href="">Request a Quote</a> 
 
\t \t \t \t </span> 
 
    </div>

Answer 2

検索フィールドには任意の値を持っている場合は、チェックしていません。そして、すべての行が""

$("#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()を務めると仮定します。しかし、私の解決策と私は考えるすべての