How to filter a table based on a simple text input

Related searches

I have been struggling with trying to filter a table based on a simple text input. It works on the first column but I also want the user to be able to filter by the second column. So I tried to add the var ts but that didn't. Any help would be much appreciated :-)

function search () {
var field = document.getElementById("searchField");
var filter = field.value.toUpperCase();
var table = document.getElementById('table');
var tr = table.getElementsByTagName('tr');
var i;
var txtValue;
var td;
var ts;
if (filter.length > 0)
{
    for (i = 0; i < tr.length; i++)
    {
        td = tr[i].getElementsByTagName("td")[0];
        ts = tr[i].getElementsByTagName("td")[1];
        if (td)
        {
            txtValue = td.textContent || td.innerText || ts.textContent || ts.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1)
            {
                tr[i].style.display = "";
            }
            else
            {
                tr[i].style.display = "none";
            }
        }
    }
}

}

Here's part of the php:

$get_persons = $connection->prepare('SELECT first_name, last_name FROM persons WHERE status = :status ORDER BY first_name ASC');
    $get_persons->execute([status=>'success']);
    echo '
        <input type="text" class="search-field" id="searchField" onkeyup="search()" placeholder="'.$searchPlaceholder.'" />
        <table id="table" class="start-list-table">
            <thead>
                <tr class="start-list-tr">
                    <th scope="col">'.$titleFirstName.'</th>
                    <th scope="col">'.$titleLastName.'</th>
                </tr>
            </thead>
            <tbody>
    ';
    $persons = $get_persons->fetchAll();
    foreach($persons as $person){
        echo '
            <tr class="start-list-tr">
                <td data-label="'.$titleFirstName.'">'.$person->first_name'</td>
                <td data-label="'.$titleLastName.'">'.$person->last_name.'</td>
            </tr>';
    }
    echo '</tbody>
    </table>';

@srikanthreddy pointed me to this thread which solved my issue in a much nicer way. Thanks!

How To Create a Filter/Search Table, Create A Filtered Table. Step 1) Add HTML: Example. <input type="text" id=� text-align: left; /* Left-align text */ padding: 12px; /* Add padding */} #myTable tr { /* Add a bottom border to all table rows */ border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { /* Add a grey background color to the table header and on hover */ background-color: #f1f1f1;}

txtValue = td.textContent || td.innerText || ts.textContent || ts.innerText;

This statement says txtValue will be td's inner text if td has inner text, so in those cases you're still filter rows by column1 not coloum2. Use this:

textValue = [td.textContent || td.innerText, ts.textContent || ts.innerText];
if (txtValue.some(txt => txt.toUpperCase().indexOf(filter) > -1))
{
    tr[i].style.display = "";
}
else
{
    tr[i].style.display = "none";
}

jQuery Filters, Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle()� Go the worksheet that you want to auto filter the date based on cell value you entered. 2. Right click the sheet tab, and selectView Codefrom the context menu, in the popped out Microsoft Visual Basic for Applicationswindow, please copy and paste the following code into the blank Modulewindow, see screenshot:

You have this line var table = document.getElementById('table'); which I doubt that table is an id. It is better to use querySelector() and querySelectorAll() if you don not require live nodes.

Here is an example with mock table data:

function search(field) {
  var filter = field.value.toUpperCase();
  var table = document.querySelector('table');
  var tr = table.querySelectorAll('tr');
  var i;
  var txtValue;
  var td;
  var ts;

  if (filter.length > 0) {
    for (i = 0; i < tr.length; i++) {
      td = tr[i].querySelector("td:first-child");
      ts = tr[i].querySelector("td:nth-child(2)");
      if (td) {

        txtValue = td.textContent || td.innerText || ts.textContent || ts.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}
<input type='text' id='searchField' oninput='search(this)'>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Search and filter a table with JavaScript - DEV, Some time ago, I needed to propose a simple search in a table. <p> Filter: < input type="text" class="table-filter" data-table="books"> </p> . It will show or hide one row depending on whether the search is positive or not:. Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search.

Is there a way to Filter a ref_row based on input text in another field , Based on the values input into that column, I want my ref_row to filter the results prior to syncing. Is this The next row on my form has a REF_ROWS linked to the parent table. There's a sample app in the post that may help. Get the "All" Criteria. Add the Criteria Formulas. Add the Macro Code. Add the Macro Button. Test the Button. Download the Sample File. Use Slicers to Set Filter Criteria in Excel. To make it easy to see specific data, while keeping the data safe, set up Slicers that you can use to filter the database.

Individual column searching (text inputs), Individual column searching (text inputs). The searching functionality provided by DataTables is useful for quickly search through the information in the table� Filter rows based on a list selection with formula With a formula, you also can filter the rows based on a list selection. 1. Select a blank cell next to the rows you want to filter, and enter this formula =COUNTIF(Sheet2!$A$2:$A$6, A2), and press Enter, then drag the auto fill handle down to apply this formula to the cells.

I actually found the feature I was looking for in the "Slicer"-visualization filter! Create a slicer and choose which column you want to use. Then click the three little dots in the right hand corner and choose "Search". Now you can easily find the entry by typing it in the search field.

Comments
  • Can you please provide the html as well?
  • You can make a snippet
  • You can check answer for this question here: stackoverflow.com/questions/43622127/…
  • @SrikanthReddy Worked like a charm. Thank you!!