Question

我正在使用此函数将类hide添加到包含my变量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？

谢谢！

Answer 1

希望这就是你要找的东西：

＆＃13;

$(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');
});

＆＃13;

.selected {
	color: red;
}

.hide {
	display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果下面的代码片段是您的需要，我不知道，但是我已经在您的代码中设置了一些更改以满足您的需求，同时您的错误表与其过滤器ID相关联！

见下面的代码：

$(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];

  
  $('#csvtext' + tipotb + 'tb tbody').find("tr").addClass('hide');
  
  $('#filter_' + tableid).find("td").each(function() {
    
    if ($(this).hasClass("selected")) {
      var text = $(this).text();
      $('#csvtext' + tipotb + 'tb tbody').find("td:contains('" + text + "')").parent('tr').removeClass('hide');
    }
  });
});

.pointer {
  cursor: pointer;
  border: 1px solid black;
}

.selected {
  color: red;
  font-weight: bold;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="csvtextcrcatb" 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 >
        <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 >
        <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 >
        <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 selected">MP &gt; 1K</td>
    </tr>
  </tbody>
</table>

addClass有find的多个结果

2 个答案: