我想突出显示与textbox具有相似值的表格单元格;即当用户开始自己输入字母时,它应该突出显示表格单元格....
<input type="text" id="txtsearch"/>
<html>
<table id="table" style="height:350px;margin-left:1em;width:700px;">
<!--this is my table header-->
<tr style="display:table-row">
<th class="checkbox"><input type="checkbox"/></th>
<th class="Name">NAME</th>
<th class="Score">SCORE</th>
<th class="Email">EMAIL</th>
<th class="Empty"></th>
</tr>
<tr>
<!--tabledata-->
<td ><input type="checkbox" /></td>
<td >Vijay Prakash</td>
<td >34</td>
<td >vijay@gmail.com</td>
<td ></td>
</tr>
</table>
<input type="button" id="btnCalculate" value="Calculate"/>
<label>Average:</label>
<label id="lblAverage"></label>
<label>Max:</label>
<label id="lblMax"></label>
</form>
</html>
</div>
答案 0 :(得分:2)
使用keyup()
和:contains
。
试试这个:
$('#textBoxID').keyup(function(){
$('td').css("background-color",'');
var value= $(this).val();
$('td:contains("'+value+'")').css("background-color",'red');
});
<强>更新强>
我正在创建一个新方法containsIN
,其工作方式与jQuery一样,并使其不区分大小写:
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$('#textBoxID').keyup(function(){
$('td').css("background-color",'');
var value= $(this).val();
$('td:containsIN("'+value+'")').css("background-color",'red');
});
答案 1 :(得分:2)
如果您想要一个不区分大小写的包含方法,可以尝试以下方法:
$("#text-box-id").keyup(function() {
var value = $(this).val().toLowerCase();
// you can add a class to the ones you want to be able to
// highlight and use like this
$("td.highlightable").each(function(index, elem) {
var $elem = $(elem);
if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {
$elem.css('backgroundColor', 'yellow');
}
else {
$elem.css('backgroundColor', '');
}
});
});
答案 2 :(得分:0)
$('#SearchBox').on('keyup', function () {
var textboxValue = $('#SearchBox').val();
$('table td').each(function () {
if ($(this).text().indexOf(textboxValue) === 0) {
$(this).addClass('highlight');
} else {
$(this).addClass('t');
}
});
});