如何让我的 Javascript 函数在部分 html 页面上工作？

Question

我有一个包含搜索按钮和 table 的部分 HTML 页面，我希望我的搜索按钮仅显示 table 中匹配的结果，方法是使用键盘。不幸的是，我继承了这个项目并且执行搜索的页面是部分的，我无法使用我的 JavaScript 函数来处理它。我已经在主页上放置了 src 行，但是当我尝试将字母插入搜索栏时，出现以下错误：

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
at myFunction (myFunction.js:11)
at 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>

Answer 1

改变

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>

如何让我的 Javascript 函数在部分 html 页面上工作？

How can i get my Javascript function to work on a partial html page?

javascript

html

partials