Question

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>a1</title>
   <link rel="stylesheet" href="a1.css" />
   <script src="a1.js"></script>
</head>
<body>
<form id = "gallary" method="get" action="">
<div id="searchBox">
  <input type="text" id="searchBar" placeholder="Search titles" />
<input type="submit" id="searchBtn" value="search" onclick="searchFunction()"/>

  <select name="genre" id ="filterBar">
    <option>Genre</option> 
    <option>Baroque</option>
    <option>Mannerism</option>
    <option>Neo-classicism</option>
    <option>Realisim</option>
    <option>Romanticism</option>
  </select>
  <input type="submit" id = "filterBtn" value="filter" onclick = 
"filterFunction()"  />
</div>
</form>
<div id="artistBox">
  <table>
    <caption>Paintings</caption>

    <thead>
      <tr>
        <th></th>
        <th>Title</th>
        <th>Artist</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
    </thead>

    <tbody id="tbody">
      <tr>
        <td><input type="checkbox" name="paintingname" /><img 
src="05030.jpg"/></td>
        <td>Death of Marat</td>
        <td>David, Jacques-Louis</td>
        <td>1793</td>
        <td>Romanticism</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="paintingname" /><img 
src="120010.jpg"/></td>
        <td>Potrait of Eleanor of Toledo</td>
        <td>Bronzino, Agnolo</td>
        <td>1545</td>
        <td>Mannerism</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="paintingname" /><img 
src="07020.jpg"/></td>
        <td>Liberty leading the people</td>
        <td>Delacroix, Eugene</td>
        <td>1830</td>
        <td>Romanticism</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="paintingname" /><img 
src="13030.jpg"/></td>
        <td>Arrangement in Grey and Black</td>
        <td>Whistler, James Abbott</td>
        <td>1871</td>
        <td>Realisim</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="paintingname" /><img 
src="06010.jpg"/></td>
        <td>Mademoiselle Caroline Riviere</td>
        <td>Ingres, Jean-Auguste</td>
        <td>1806</td>
        <td>Neo-classicism</td>
      </tr>
    </tbody>


  </table>

</div>   
</body>
</html>

enter code here

以上是我的HTML代码。 searchBar用于搜索标题（tbody的第二列），过滤器用于过滤类型（tbody的第四列）。

我想从表中搜索并过滤一些特定内容，并使用点击触发我的功能，但它不起作用。谁能帮我？

var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementByTagName("tr");
var td;

var filter = document.getElementById("filterBar").value;

function makeGreen(inputDiv){
    inputDiv.style.backgroundColor = "green";
}

function searchFunction(){

    for (var i = 0; i < tr.length; i++) {
        td = tr[i].getElementByTagName("td")[1];
        if(td.innerHTML.toUpperCase() == input){
            makeGreen(tr[i]);
        }
    };
}
function filterFunction(){
for (var i = 0; i < tr.length; i++) {
    td = tr[i].getElementByTagName("td")[4];
    if(td.innerHTML == input){
        tr[i].style.display = "";
    }else{
        tr[i].style.display = "none";
    }
 }

Answer 1

您正在脚本开头设置'input'，'tbody'，'tr'和'td'的值。这些在脚本加载时得到评估，但在脚本文件加载完成后被销毁。那就是“searchFunction”不知道这些标签的值。

考虑更新后的代码:(请参见：Plunker）

<script type="text/javascript">
  function makeGreen(inputDiv){
      inputDiv.style.backgroundColor = "green";
  }

  function searchFunction(){
      var input = document.getElementById("searchBar").value.toUpperCase();
      var input = document.getElementById("searchBar").value.toUpperCase();
      var tbody = document.getElementById("tbody");
      var tr = tbody.getElementsByTagName("tr");
      console.log(input);
      for (var i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[1];
          var filter = document.getElementById("filterBar").value;

          if(td.innerHTML.toUpperCase() == input){
              makeGreen(tr[i]);
          }
      };
  }
  function filterFunction(){
    var input = document.getElementById("searchBar").value.toUpperCase();
    var tbody = document.getElementById("tbody");
          var tr = tbody.getElementsByTagName("tr");
      for (var i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[4];
      if(td.innerHTML == input){
          tr[i].style.display = "";
      }else{
          tr[i].style.display = "none";
      }
    } // <-- Missing
 }
</script>

为什么我的javascript代码不起作用（关于搜索和过滤条）

1 个答案: