CODEWITHSUNDEEP
javascriptjqueryfind
Zeca Novaes
Zeca Novaes

Reputation: 419

addClass with multiple results from find

I'm using this function to add the class hide to the table row that contains the value of my variable text. The problem is that usually my selected td can get two values, but this function only works well with one value.

My tables:

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

Function:

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

How can I change this function to read those values of td with selected class and merge them to add or remove hide?

Thanks!

Upvotes: 0

Views: 55

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

I dont knkow if the below snippet is your need , but I've set some change in your code to sweet your demand , also you have wrong table associated to it's filter id !

See below snippet :

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

Upvotes: 1

Phani Kumar M
Phani Kumar M

Reputation: 4590

Hope this is what you are looking for:

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

Upvotes: 1

Related Questions