我正在使用此函数将类hide
添加到包含我的变量text
值的表行中。问题在于,通常我的selected
td
可以获取两个值,但是此函数仅对一个值有效。
我的桌子:
<div id="csvtextcomptb" class="tableunform"><table cellspacing="1"
cellpadding="1" border="1"><thead><tr><th>TABLE</th><th>TAG</th><th>DATE</th><th>STATUS</th><th>Key</th><th>Prev</th></tr></thead>
<tbody><tr><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(1)</td><td>CA5520</td><td>MP < 1K</td></tr>
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5520</td><td>MP > 1K</td></tr>
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5534</td><td>MP > 1K</td></tr>
<tr class="hide"><td>COMP</td><td>COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5328</td><td>MP > 1K</td></tr></tbody></table></div>
<table id="filter_crca">
<tbody>
<tr>
<td class="pointer selected">MP < 1K</td>
<td class="pointer">MP > 1K</td>
</tr>
</tbody>
</table>
功能:
$(document).on("click","[id*='filter_'] tbody td", function(e){
$(this).toggleClass('selected');
var prev = $(this).text().trim();
var tbid = $(this).closest('table').attr('id');
var regExp = /[^\*filter_]\w+/;
var tableid = regExp.exec(tbid.toString());
var tipotb = tableid.toString().split('_')[0];
var text = $('#filter_' + tableid).find("td").map(function(){
if( $(this).hasClass("selected") ) {
return $(this).text()
}
}).get();
$.each(text, function(index, value){
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + value + "')").removeClass('hide');
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + value + "'))").addClass('hide');
});
});
如何更改此函数以使用
td
类读取selected
的那些值并合并它们以添加或删除hide
?谢谢!
最佳答案
希望这是您想要的:
$(document).on("click", "[id*='filter_'] tbody td", function (e) {
var prev = $(this).text().trim();
var tbid = $(this).closest('table').attr('id');
var regExp = /[^\*filter_]\w+/;
var tableid = regExp.exec(tbid.toString());
var tipotb = tableid.toString().split('_')[0];
//Added code
$('#filter_' + tableid).find("td").not(this).removeClass('selected');
$(this).toggleClass('selected');
var text = $('#filter_' + tableid).find("td.selected").text();
$('#csvtext' + tipotb + 'tb tbody tr').addClass("hide");
//End
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + text + "')").removeClass('hide');
//$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + text + "'))").addClass('hide');
});
.selected {
color: red;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="csvtextcomptb" class="tableunform">
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th>TABLE</th>
<th>TAG</th>
<th>DATE</th>
<th>STATUS</th>
<th>Key</th>
<th>Prev</th>
</tr>
</thead>
<tbody>
<tr>
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(1)</td>
<td>CA5520</td>
<td>MP < 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5520</td>
<td>MP > 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5534</td>
<td>MP > 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td>COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5328</td>
<td>MP > 1K</td>
</tr>
</tbody>
</table>
</div>
<table id="filter_comp">
<tbody>
<tr>
<td class="pointer selected">MP < 1K</td>
<td class="pointer">MP > 1K</td>
</tr>
</tbody>
</table>
关于javascript - addClass具有来自find的多个结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46905535/