CODEWITHSUNDEEP
javascripthtmljquery
Voncloft
Voncloft

Reputation: 21

How do I keep buttons visible when searching table rows in javascript?

Basically where I have the 3 buttons 1, 2, and 3 in the second column first row if I type 3 the only button shows up is 3....removing buttons 1 and 2

for example if I'm looking for text with "2" in it it should still show

I want all buttons to stay regardless if they show up in the search or not...can this be achieved?

I have atleast 4 columns visible at all times and I want to search ONLY the text in the < TD > not the element text in the < TD > so radio buttons, buttons, check boxes....I want those to be immune from searches always show them as long as that particular row has the text snippet in one of the columns of that row just search the text in < TD >

Googling the right phrase has led me here because google assumes I want a checkbox to search a table....NO....I want a search to only focus on text not element text if that makes sense

Thanks

function myFunction() {
  const input = document.getElementById("myInput");
  const inputStr = input.value.toUpperCase();
  const search_length = inputStr.length;
  
  //alert(search_length);

  document.querySelectorAll('#myTable tr:not(.header)').forEach((tr) => {
    const anyMatch = [...tr.children]
      .some(td => td.textContent.toUpperCase().includes(inputStr));
    //fix the button issue here
    if (anyMatch) tr.style.removeProperty('display');
    else tr.style.display = 'none';
  });
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type to search">

<table id="myTable" border="2">
<thead><tr>
<th>Col1</th>
<th>Col2</th>
</tr></thead>
<tbody>
<tr><td>2</td><td>
<table>
<tr><td>2<button type="button">1</button></td></tr>
<tr><td>5<button type="button">2</button></td></tr>
<tr><td>9<button type="button">3</button></td></tr>
</table></td></tr>
<tr><td>test4</td><td><button type="button">5</button></td></tr>
</tbody>
</table>

Upvotes: 0

Views: 64

Answers (1)

epascarello
epascarello

Reputation: 207527

If you do not want to hide the sub table rows your selector needs to only touch the outside table.

function myFunction() {
  const input = document.getElementById("myInput");
  const inputStr = input.value.toUpperCase();
  const search_length = inputStr.length;

  //alert(search_length);

  document.querySelectorAll('#myTable > tbody > tr:not(.header)').forEach((tr) => {
    const anyMatch = [...tr.children]
      .some(td => td.textContent.toUpperCase().includes(inputStr));
    //fix the button issue here
    if (anyMatch) tr.style.removeProperty('display');
    else tr.style.display = 'none';
  });
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type to search">

<table id="myTable" border="2">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>
        <table>
          <tr>
            <td>2<button type="button">1</button></td>
          </tr>
          <tr>
            <td>5<button type="button">2</button></td>
          </tr>
          <tr>
            <td>9<button type="button">3</button></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>test4</td>
      <td><button type="button">5</button></td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions