Sun. Jun 4th, 2023

[ANSWERED] html – how to show hide tr if td meet the condition in javascript

By

Nov 18, 2022 html, javascript, jquery

Solution 1 :

with js (ES6):

const
  chk_text2 = document.querySelector('#contains')
, tableRows = document.querySelectorAll('#my-table tbody tr')
  ;
  
chk_text2.onchange = () =>
  {
  tableRows.forEach( tr => 
    {
    tr.classList.toggle('noDisplay', !tr.innerText.includes('text2') && chk_text2.checked)
    })
  }

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 14px;
  }
td,th  {
  padding : .2em .8em;
  border  : 1px solid darkblue;
  }
thead { 
  background : aquamarine;
  }
.noDisplay {
  display : none;
  }

<input type="checkbox" id="contains" >contains text2
<br/>

<table id="my-table"> 
  <thead>
    <tr>
      <th>Name</th><th>Lastname</th><th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>text2</td><td>text2</td><td>text2</td>
    </tr>
    <tr>
      <td>text3</td><td>text4</td><td>text4</td>        
    </tr>
   </tbody>
</table>

Solution 2 :

// handle click
document.querySelector('#contains').addEventListener('click', () => {
  // filter items
  const rowsToHide = Array.from(document.querySelectorAll('tr')).filter(row => {
    // get first content
    const content = row.querySelector('td').textContent

    // check all items is equal to first element
    return Array.from(row.querySelectorAll('td'))
      .some(row => row.textContent !== content)
  })

  // perform action
  rowsToHide.forEach(row => { row.style.display = 'none' })
})

Solution 3 :

Maybe something like this

$('#contains').
  change( function() 
   {
  $('tr').each(function()
     { 
      var hiderow=1;
      var firsttd = $('td',this)[0];
      if(firsttd)
        {
          var firsttdtext =firsttd.innerHTML;
          $('td',this).each(function(index,element)
          {
            if(index<1) 
              return;
            if(firsttdtext != element.innerHTML)
              hiderow=0;
          });
          if(hiderow==1)
            $(this).toggle();
         }
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="contains" >Hide same values
<br/>

<table border="1" style="text-align:center;">
  <tr>
    <th>Name</th><th>Lastname</th>
  </tr>
  <tr>
    <td>text2</td><td>text2</td><td>text2</td>
  </tr>
  <tr>
    <td>text3</td><td>text4</td><td>text4</td>        
  </tr>
  <tr>
    <td>textxyz</td><td>textxyz</td><td>textxyz</td>        
  </tr>
</table>

Problem :

I want to show/hide tr when all td have same values in current tr.in second tr have 2 same value but i m able to hide/show . it will show hide when all td value same.

$('#contains').change( function() {
  $('td:contains("text2")').parent().toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="contains" >contains text2
<br/>

<table border="1" style="text-align:center;">
  <tr>
    <th>Name</th><th>Lastname</th>
  </tr>
  <tr>
    <td>text1</td><td>text2</td><td>text2</td>
  </tr>
  <tr>
    <td>text3</td><td>text4</td><td>text4</td>        
  </tr>
</table>

Comments

Comment posted by freedomn-m

It’s unclear what you want to happen that doesn’t already happen in the code you provided (converted to a working snippet)

Comment posted by BenM

What is your question?

Comment posted by showdev

@BenM “i want to” = “how do i”

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022