基于文本框值突出显示表格单元格
我想突出显示与文本框具有相似值的表格单元格;即当用户开始输入字母本身就应该突出显示表细胞....基于文本框值突出显示表格单元格
<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 >[email protected]</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>
如果你想要一个不区分大小写包含方法，你可以尝试以下方法：
$("#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', '');
}
});
});
实际上，在突出显示单元格时，突出显示单元格包含特定字母的单元格，但是只有当它将成为第一个字母时才会突出显示 – 2013-05-03 05:50:12
即使索引是不是-1或零......即如果文本框的值是“vijay”，即使单元格包含“tttvijay”，它应该突出显示该单元格？ – 2013-05-03 06:08:53
该代码已经可以做到这一点：http://jsfiddle.net/3leven11/s4tRu/3/并在文本框中键入vijay – samazi 2013-05-05 04:03:40
使用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');
});
$('#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');
}
});
});
我使用上面的代码，但不知道为什么它突出显示emailid表格单元格......但不是表格单元格包含名称..我只想要突出显示的名称..是否有任何解决方案 – 2013-05-03 05:35:16
看到我的答案f或只突出显示特定的单元格 – samazi 2013-05-03 05:39:17
这shud突出匹配的表格单元格 – 2013-05-03 05:15:45
我已经尝试过，并张贴了不同的答案只看到它.. 。我没有得到确切的输出结果，我想要的.datz reasn我发布在这里 – 2013-05-03 05:36:16