how to search in html table with any columns?

Question

i want to filter or search in this table by using any columns such Title or start date or visible and so on now my code search by first col "Title"only i can't make it search in all cols https://datatables.net/examples/data_sources/dom.html that is exactly what i want

<div>
    <label>
        Search:<input type="text" id="Search" onkeyup="myFunction()" placeholder="search for performance">
    </label>
</div>
<table id="PerformanceTable" class="table table-bordered table-striped">

    <tr>
        <th>
            Title
        </th>
        <th>
            Start Date
        </th>
        <th>
            Booking
        </th>
        <th>
            Visible
        </th>
        <th>
            Featured
        </th>
        <th>
            Event
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Views)
        </th>
        <th></th>
    </tr>
</table>
<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("Search");
        filter = input.value.toUpperCase();
        table = document.getElementById("PerformanceTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the        search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

    }</script>

Answer 1

You need to loop through all the td s available. But make sure to break when you find the match. Example code below:

// Declare variables
var input, filter, table, tr, td, i ;
input = document.getElementById("Search");
filter = input.value.toUpperCase();
table = document.getElementById("PerformanceTable");
tr = table.getElementsByTagName("tr"),
th = table.getElementsByTagName("th");

// Loop through all table rows, and hide those who don't match the        search query
for (i = 1; i < tr.length; i++) {
            tr[i].style.display = "none";
            for(var j=0; j<th.length; j++){
        td = tr[i].getElementsByTagName("td")[j];      
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1)                               {
                tr[i].style.display = "";
                break;
            }
        }
    }
}

Answer 2

Remove the .getElementsByTagName("td")[]

the for loop should be like this:

for (i = 1; i < tr.length; i++) {
  td = tr[i];
  if (td) {
    txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}