検索バーは、ここで

Question

に入ったhtmlコードです：

<div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">{{selectedClassName}}</h4> 
      </div> 
      <div class="modal-body errorDetailPannel"> 
       <table class="table table-sm table-inverse table-responsive table-striped"> 
        <thead> 
         <tr> 
          <th>Line</th> 
          <th>Review Feedback</th> 
         </tr> 
         <input type="text" class="form-control search-box" placeholder="Search"> 
        </thead> 
        <tbody> 
         <tr ng-repeat="eachClass in selectedClassErrDetails"> 
          <td>{{eachClass.lineNumber}}</td> 
          <td>{{eachClass.reviewFeedback}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

</div> 

JSファイル：

function OrderFormController($scope,$http){ 

    var urlString = window.location.href; 
    var urlParams = parseURLParams(urlString); 

    var date = urlParams['date']; 

    var jsonData = $.ajax({ 
     url: "**********************************************, 
     dataType: "json", 
     crossDomain: true, 
     async: false 
    }).responseText; 

    var parsed = JSON.parse(jsonData); 
    $scope.selectedClassErrDetails = []; 
    $scope.selectedClassName = ""; 
    $scope.showErrorDetails = function(classNameKey){ 
     $scope.selectedClassName = classNameKey; 
     $scope.selectedClassErrDetails = $scope.sampleJSON[classNameKey]; 
     angular.element('#myModal').modal('show'); 
    }; 

    $scope.sampleJSON = parsed; 

}; 

function parseURLParams(url) { 
    var queryStart = url.indexOf("?") + 1, 
     queryEnd = url.indexOf("#") + 1 || url.length + 1, 
     query = url.slice(queryStart, queryEnd - 1), 
     pairs = query.replace(/\+/g, " ").split("&"), 
     parms = {}, i, n, v, nv; 

    if (query === url || query === "") return; 

    for (i = 0; i < pairs.length; i++) { 
     nv = pairs[i].split("=", 2); 
     n = decodeURIComponent(nv[0]); 
     v = decodeURIComponent(nv[1]); 

     if (!parms.hasOwnProperty(n)) parms[n] = []; 
     parms[n].push(nv.length === 2 ? v : null); 
    } 
    return parms; 
} 

私はの上部にある検索パネルを導入しています私のモーダルですが、動作しません。送信ボタンは必要ありませんが、テキストが検索ボックスに入力されると、検索ボックスの一致するフレーズに基づいてmoday-contentの結果をフィルタリングする必要があります。下の画像で私はasdを付けましたが、結果をフィルタリングしませんでした。

Modifed JS：

function searchFunction() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("searchBar"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("errorTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 0; i < tr.length; i++) { 
     td = tr[i].getElementsByTagName("td")[1]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tr[i].style.display = ""; 
      } else { 
       tr[i].style.display = "none"; 
      } 
     } 
    } 
} 

Answer 1

function myFunction() { 
 
    var input, filter, table, tr, td, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById("myTable"); 
 
    tr = table.getElementsByTagName("tr"); 
 
    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"; 
 
     } 
 
    }  
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#myInput { 
 
    background-image: url('/css/searchicon.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 12px; 
 
} 
 

 
#myTable { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
    font-size: 18px; 
 
} 
 

 
#myTable th, #myTable td { 
 
    text-align: left; 
 
    padding: 12px; 
 
} 
 

 
#myTable tr { 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
#myTable tr.header, #myTable tr:hover { 
 
    background-color: #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>My Customers</h2> 
 

 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 

 
<table id="myTable"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>

あなたは、このように検索したいのですか？