Как я могу заставить мою функцию Javascript работать на частичной HTML-странице? - PullRequest
0 голосов
/ 07 февраля 2019

У меня есть частичная HTML-страница, которая включает кнопку поиска и таблицу, и я хочу, чтобы моя кнопка поиска показывала только те результаты, которые соответствуют таблице, используя keyup.К сожалению, я унаследовал этот проект, и страница, которая выполняет поиск, является частичной, и я не могу заставить свою функцию JavaScript работать с ним.Я уже разместил строку src на главной странице, но как только я пытаюсь вставить буквы в строку поиска, я получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'getElementsByTagName' из null
в myFunction (myFunction.js: 11)
в HTMLInputElement.onkeyup ((index): 1)

Как мне решить эту проблему?

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchtable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>

1 Ответ

0 голосов
/ 07 февраля 2019

Изменить

table = document.getElementById("searchtable");

на (T заглавные буквы)

table = document.getElementById("searchTable");

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>
...