我正在使用此函数将类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 &lt; 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 &gt; 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 &gt; 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 &gt; 1K</td></tr></tbody></table></div>

<table id="filter_crca">
    <tbody>
        <tr>
            <td class="pointer selected">MP &lt; 1K</td>
            <td class="pointer">MP &gt; 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 &lt; 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 &gt; 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 &gt; 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 &gt; 1K</td>
			</tr>
		</tbody>
	</table>
</div>

<table id="filter_comp">
	<tbody>
		<tr>
			<td class="pointer selected">MP &lt; 1K</td>
			<td class="pointer">MP &gt; 1K</td>
		</tr>
	</tbody>
</table>

关于javascript - addClass具有来自find的多个结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46905535/

10-13 04:27