未使用onkeyup定義表格搜索功能

使用與w3schools上的table search類似的功能，我得到的錯誤是用於onkeyup的函數沒有在輸入元素上定義。該函數的名稱是相同的，所以這不應該是一個問題。未使用onkeyup定義表格搜索功能

HTML

<div class="row"> 
<div class="container form-container"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form"> 

<input type="text" id="search" onkeyup="tableSearch()" placeholder="Search for names.." title="Search by Name, Practice Area or Location"> 
     </div> 
</div> 

<div class="results"> 
    <div class="col-lg-12"> 
    <div id="no-more-tables"> 
     <table id="results" class="order-table col-md-12 cf"> 
      <thead class="cf"> 
       <tr> 
        <th class="numeric">field 1</th> 
        <th class="numeric">field 2</th> 
        <th class="numeric">field 3</th> 
        <th class="numeric">field 4</th> 
        <th class="numeric">field 5</th> 
       </tr> 
      </thead> 
      <tbody> 

       <tr> 
        <td data-title="" class="name"><a href="user-1">User 1</a><a href="tel:(407) 420-1414"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:[email protected]"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td> 
        <td data-title="location"></td> 
        <td data-title="practice area" class=""></td> 
        <td data-title="email" class="numeric desktop-only"><a href="mailto:[email protected]">[email protected]</a></td> 
      <td data-title="phone" class="numeric desktop-only"><a href="tel:(111) 111-1111">(111) 111-1111</a></td> 
       </tr> 

       <tr> 
        <td data-title="" class="name"><a href="user-2">User 2</a><a href="tel:1111111111"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:[email protected]"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td> 
        <td data-title="location"></td> 
        <td data-title="practice area" class=""></td> 
        <td data-title="email" class="numeric desktop-only"><a href="mailto:[email protected]">[email protected]</a></td> 
      <td data-title="phone" class="numeric desktop-only"><a href="tel:1111111111">1111111111</a></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
</div> 
</div>

的JavaScript

function tableSearch() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("search"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("results"); 
    tr = table.getElementsByTagName("tr"); 


    for (i = 0; i < tr.length; i++) { 

    tds = tr[i].getElementsByTagName("td"); 
    var found = false; 
    //---second loop that goes over all tds in a tr ---can be modified as required to go over only certain tds 
    for (j = 0; j < tds.length; j++) { 
     td = tds[j]; 
     if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      found = true; 
      break; 
     } 
     } 
    } 

    if (found) 
     tr[i].style.display = ""; 
    else 
     tr[i].style.display = "none"; 

    } 
}

的jsfiddle：LINK

來源

2017-04-07 Matt

你的方法tableSearch是onload加載類型在您的小提琴的Javascript選項，因此它不在全球範圍內。

檢查更新的fiddle'sJavascript選項。我選擇'包裝頭'將其放入全局範圍，以便可以從事件處理程序訪問它。

來源

2017-04-07 14:41:04 gurvinder372

我明白了。另一個問題是表格標題在搜索中消失，儘管它們應該保持可見，就像它們在w3schools版本中一樣。 – Matt

-1

也許你可以使用jQuery庫

$("#search").keypress(function() { 
    tableSearch(); 
});

來源

2017-04-07 14:46:18 Rex

未使用onkeyup定義表格搜索功能

回答

相關問題