从浏览器在 html 中运行 javascript

Question

我在这篇文章的jsfiddle中有一个可用的 javascript，我想用我的浏览器在本地运行。

我不太确定还需要向 HTML 添加什么才能使其正常运行。 我阅读了很多帖子，但仍然无法弄清楚如何解决它。

以下是我所做的，但运行代码片段时出现错误，有人可以帮忙吗？ 谢谢。

 $(document).ready(function myFunction() { // Declare variables var input = document.getElementById("myInput"); var filter = input.value.toUpperCase(); var table = document.getElementById("myTable"); var trs = table.tBodies[0].getElementsByTagName("tr"); // Loop through first tbody's rows for (var i = 0; i < trs.length; i++) { // define the row's cells var tds = trs[i].getElementsByTagName("td"); // hide the row trs[i].style.display = "none"; // loop through row cells for (var i2 = 0; i2 < tds.length; i2++) { // if there's a match if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) { // show the row trs[i].style.display = ""; // skip to the next row continue; } } } });

 #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; 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 th { width: 20%; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

 <:DOCTYPE html> <html> <head> <script type="text/javascript" src="https.//ajax.googleapis.com/ajax"></script> </head> <body> <p><input id="myInput" type="text" placeholder="Search for names.:" /></p> <table id="myTable"> <thead> <tr class="header"> <th>Date</th> <th>Home</th> <th>Time</th> <th>Away</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>08/01/2018</td> <td>SPAIN</td> <td>16:30 ET</td> <td>USA</td> <td>BARCELONA</td> </tr> <tr> <td>08/02/2018</td> <td>BOLIVIA</td> <td>18:30 ET</td> <td>PORTUAL</td> <td>MADRID</td> </tr> <tr> <td>08/03/2018</td> <td>PUERTO RICO</td> <td>18:30 ET</td> <td>CANADA</td> <td>CHICAGO</td> </tr> <tr> <td>08/04/2018</td> <td>MEXICO</td> <td>19:30 ET</td> <td>ENGLAND</td> <td>LONDON</td> </tr> </tbody> </table> </body> </html>

Answer 1

首先你不需要 jQuery 这里。 我对您的代码进行了两次更改，并且有效

1. 删除$(document).ready(和 close )
2. 在输入上添加了onkeyup="myFunction()"

请检查下面的代码。

 #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; 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 th { width: 20%; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script> <body> <p><input id="myInput" onkeyup="myFunction()" type="text" placeholder="Search for names.." /></p> <table id="myTable"> <thead> <tr class="header"> <th>Date</th> <th>Home</th> <th>Time</th> <th>Away</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>08/01/2018</td> <td>SPAIN</td> <td>16:30 ET</td> <td>USA</td> <td>BARCELONA</td> </tr> <tr> <td>08/02/2018</td> <td>BOLIVIA</td> <td>18:30 ET</td> <td>PORTUAL</td> <td>MADRID</td> </tr> <tr> <td>08/03/2018</td> <td>PUERTO RICO</td> <td>18:30 ET</td> <td>CANADA</td> <td>CHICAGO</td> </tr> <tr> <td>08/04/2018</td> <td>MEXICO</td> <td>19:30 ET</td> <td>ENGLAND</td> <td>LONDON</td> </tr> </tbody> </table> </body> <script> function myFunction() { // Declare variables var input = document.getElementById("myInput"); var filter = input.value.toUpperCase(); var table = document.getElementById("myTable"); var trs = table.tBodies[0].getElementsByTagName("tr"); // Loop through first tbody's rows for (var i = 0; i < trs.length; i++) { // define the row's cells var tds = trs[i].getElementsByTagName("td"); // hide the row trs[i].style.display = "none"; // loop through row cells for (var i2 = 0; i2 < tds.length; i2++) { // if there's a match if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) { // show the row trs[i].style.display = ""; // skip to the next row continue; } } } }; </script>

Answer 2

首先，您需要添加 jquery 库，下一步是在您的输入中添加 onkeyup 事件以启动 function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

例子：

 function myFunction() { // Declare variables var input = document.getElementById("myInput"); var filter = input.value.toUpperCase(); var table = document.getElementById("myTable"); var trs = table.tBodies[0].getElementsByTagName("tr"); // Loop through first tbody's rows for (var i = 0; i < trs.length; i++) { // define the row's cells var tds = trs[i].getElementsByTagName("td"); // hide the row trs[i].style.display = "none"; // loop through row cells for (var i2 = 0; i2 < tds.length; i2++) { // if there's a match if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) { // show the row trs[i].style.display = ""; // skip to the next row continue; } } } }

 #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; 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 th { width: 20%; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><input id="myInput" type="text" onkeyup="myFunction()" placeholder="Search for names.." /></p> <table id="myTable"> <thead> <tr class="header"> <th>Date</th> <th>Home</th> <th>Time</th> <th>Away</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>08/01/2018</td> <td>SPAIN</td> <td>16:30 ET</td> <td>USA</td> <td>BARCELONA</td> </tr> <tr> <td>08/02/2018</td> <td>BOLIVIA</td> <td>18:30 ET</td> <td>PORTUAL</td> <td>MADRID</td> </tr> <tr> <td>08/03/2018</td> <td>PUERTO RICO</td> <td>18:30 ET</td> <td>CANADA</td> <td>CHICAGO</td> </tr> <tr> <td>08/04/2018</td> <td>MEXICO</td> <td>19:30 ET</td> <td>ENGLAND</td> <td>LONDON</td> </tr> </tbody> </table>

Answer 3

您需要删除此行：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>

将 jquery 替换为 javascript function

$(document).ready(function myFunction() ...)

通过 javascript onload 事件：

<script type="text/javascript"> function myFunction() {...} </script>

<body onload="myFunction()">

并在 keyUp 时在输入中调用 myFunction() 像这样

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>

要拥有这个：

<!DOCTYPE html>
<html>

<head>

  <style>
    #myInput {
      background-position: 10px 12px;
      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 th {
      width: 20%;
    }
    
    #myTable tr {
      border-bottom: 1px solid #ddd;
    }
    
    #myTable tr.header,
    #myTable tr:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="myFunction()">
  <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>
  <table id="myTable">
    <thead>
      <tr class="header">
        <th>Date</th>
        <th>Home</th>
        <th>Time</th>
        <th>Away</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>08/01/2018</td>
        <td>SPAIN</td>
        <td>16:30 ET</td>
        <td>USA</td>
        <td>BARCELONA</td>
      </tr>
      <tr>
        <td>08/02/2018</td>
        <td>BOLIVIA</td>
        <td>18:30 ET</td>
        <td>PORTUAL</td>
        <td>MADRID</td>
      </tr>
      <tr>
        <td>08/03/2018</td>
        <td>PUERTO RICO</td>
        <td>18:30 ET</td>
        <td>CANADA</td>
        <td>CHICAGO</td>
      </tr>
      <tr>
        <td>08/04/2018</td>
        <td>MEXICO</td>
        <td>19:30 ET</td>
        <td>ENGLAND</td>
        <td>LONDON</td>
      </tr>
    </tbody>
  </table>
</body>

<script type="text/javascript">

  function myFunction() {
    
    // Declare variables 
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("myTable");
    var trs = table.tBodies[0].getElementsByTagName("tr");

    // Loop through first tbody's rows
    for (var i = 0; i < trs.length; i++) {

      // define the row's cells
      var tds = trs[i].getElementsByTagName("td");

      // hide the row
      trs[i].style.display = "none";

      // loop through row cells
      for (var i2 = 0; i2 < tds.length; i2++) {

        // if there's a match
        if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

          // show the row
          trs[i].style.display = "";

          // skip to the next row
          continue;

        }
      }
    }

  };
</script>

</html>