我应该如何修改我的搜索条码以同时影响 2 个表，而不仅仅是 1 个？

Question

我有 html 代码，显示在第 2 页搜索栏和 2 个 table 上，每个搜索栏都位于单个搜索栏下方。输入短语后的 searchbar1 隐藏了 table1 中不相关的所有内容，正如 searchbar2 对 table2 所做的那样。

你可以在这里看到它是如何工作的：https://imgur.com/a/Ox6eURn

我想以这种方式修改代码，在顶部只有一个搜索栏，输入后会同时在两个 table 中显示所需的结果。可能吗？

我尝试将 mySearchFunction2() 的内容移动到 mySearchFunction() 的正下方 mySearchFunction()，但是这种方法不起作用。我也试过改：

id="myInput2" onkeyup="mySearchFunction2()" 至

id="myInput" onkeyup="mySearchFunction()" 因此点击时的 ID 和功能与第一个相同，尽管 searchbar1 仍然仅隐藏第一个 table.

的结果

<body>

    <div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
            <div><input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Type channel name..."></div>
                <div class="table100 ver6 m-b-110">
                    <table data-vertable="ver6" id="ContactsTable">
                        <thead>
                                <tr class="row100 head">
                                    <th class="cell100 column1"><center><center>Provider</center></th>
                                    <th class="cell100 column2"><center>Channels</center></th>
                                    <th class="cell100 column3"><center>Email</center></th>
                                    <th class="cell100 column4"><center>Phone</center></th>
                                    <th class="cell100 column5"><center>Additional info</center></th>
                                </tr>
                            </thead>
                        <tbody>
                                <tr class="row100">
                                    <td class="cell100 column1"><center><center>Example</center></td>
                                    <td class="cell100 column2">
                                        EXAMPLE
                                    </br>EXAMPLE +EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE 2 HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE HD
                                    </br>EXAMPLE+ EXAMPLE HD
                                    </td>
                                    <td class="cell100 column3">
                                    EXAMPLE@EXAMPLE.EXAMPLE
                                    </td>
                                    <td class="cell100 column4">
                                         EXAMPLE  
                                    </br>EXAMPLE
                                    </br>2EXAMPLE
                                    </br>2EXAMPLE
                                    </br>EXAMPLE</br> EXAMPLE   </td>
                                    <td class="cell100 column5"></td>
                                </tr>
                                <tr class="row100">
                                    <td class="cell100 column1"><center><center>Example2</center></td>
                                    <td class="cell100 column2">
                                        EXAMPLE22
                                    </br>EXAMPLE22 +EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE 2 HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE HD
                                    </br>EXAMPLE22+ EXAMPLE HD
                                    </td>
                                    <td class="cell100 column3">
                                    EXAMPLE@EXAMPLE.EXAMPLE
                                    </td>
                                    <td class="cell100 column4">
                                         EXAMPLE  
                                    </br>EXAMPLE
                                    </br>2EXAMPLE
                                    </br>2EXAMPLE
                                    </br>EXAMPLE</br> EXAMPLE   </td>
                                    <td class="cell100 column5"></td>
                                </tr>
                                </tbody>
                            </table>
                </div>


<div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
            <div><input type="text" id="myInput2" onkeyup="mySearchFunction2()" placeholder="Type channel name..."></div>
                <div class="table100 ver6 m-b-110">
                    <table data-vertable="ver6" id="ProvidersTable">
                        <thead>
                                <tr class="row100 head">
                                    <th class="cell100 column1"><center>Provider</center></th>
                                    <th class="cell100 column2"><center>Channels</center></th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr class="row100">
                                    <td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
                                    <td class="cell100 column2">EXAMPLE2TABLE HD
                                    </br>EXAMPLE2TABLE SPORTS HD
                                    </br>EXAMPLE2TABLE EXTRA HD</td>
                                </tr>
                                <tr class="row100">
                                    <td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
                                    <td class="cell100 column2">EXAMPLE2TABLE.tv
                                    </br>EXAMPLE2TABLE TV
                                    </br>EXAMPLE2TABLE HD/SD
                                    </br>EXAMPLE2TABLE Kids
                                    </br>EXAMPLE2TABLE Kids Jr.</td></tr>
                        </tbody>
                    </table>
                </div>
</tbody></table>                                

<!--===============================================================================================-->  
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="js/main.js"></script>

</body>
</html>

<script>
function mySearchFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("ContactsTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
//tried to move content of function below here  
}

function mySearchFunction2() {

  input = document.getElementById("myInput2");
  filter = input.value.toUpperCase();
  table = document.getElementById("ProvidersTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

提前感谢您提出的任何建议，让我更接近解决方案。

Answer 1

希望这段代码对你有用:)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <style>
    .center {
        margin: auto;
        width: 50%;
        padding: 10px;
    }
</style>
</head>
<body>

    <div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
            <div><input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Type channel name..."></div>
                <div class="table100 ver6 m-b-110">
                    <table data-vertable="ver6" id="ContactsTable">
                        <thead>
                                <tr class="row100 head">
                                    <th class="cell100 column1"><center><center>Provider</center></th>
                                    <th class="cell100 column2"><center>Channels</center></th>
                                    <th class="cell100 column3"><center>Email</center></th>
                                    <th class="cell100 column4"><center>Phone</center></th>
                                    <th class="cell100 column5"><center>Additional info</center></th>
                                </tr>
                            </thead>
                        <tbody>
                                <tr class="row100">
                                    <td class="cell100 column1"><center><center>Example</center></td>
                                    <td class="cell100 column2">
                                        EXAMPLE
                                    </br>EXAMPLE +EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE 2 HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE SD/HD
                                    </br>EXAMPLE+ EXAMPLE HD
                                    </br>EXAMPLE+ EXAMPLE HD
                                    </td>
                                    <td class="cell100 column3">
                                    EXAMPLE@EXAMPLE.EXAMPLE
                                    </td>
                                    <td class="cell100 column4">
                                         EXAMPLE  
                                    </br>EXAMPLE
                                    </br>2EXAMPLE
                                    </br>2EXAMPLE
                                    </br>EXAMPLE</br> EXAMPLE   </td>
                                    <td class="cell100 column5"></td>
                                </tr>
                                <tr class="row100">
                                    <td class="cell100 column1"><center><center>Example2</center></td>
                                    <td class="cell100 column2">
                                        EXAMPLE22
                                    </br>EXAMPLE22 +EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE 2 HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE SD/HD
                                    </br>EXAMPLE22+ EXAMPLE HD
                                    </br>EXAMPLE22+ EXAMPLE HD
                                    </td>
                                    <td class="cell100 column3">
                                    EXAMPLE@EXAMPLE.EXAMPLE
                                    </td>
                                    <td class="cell100 column4">
                                         EXAMPLE  
                                    </br>EXAMPLE
                                    </br>2EXAMPLE
                                    </br>2EXAMPLE
                                    </br>EXAMPLE</br> EXAMPLE   </td>
                                    <td class="cell100 column5"></td>
                                </tr>
                                </tbody>
                            </table>
                </div>


<div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
            <!--<div><input type="text" id="myInput2" onkeyup="mySearchFunction2()" placeholder="Type channel name..."></div> -->
                <div class="table100 ver6 m-b-110">
                    <table data-vertable="ver6" id="ProvidersTable">
                        <thead>
                                <tr class="row100 head">
                                    <th class="cell100 column1"><center>Provider</center></th>
                                    <th class="cell100 column2"><center>Channels</center></th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr class="row100">
                                    <td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
                                    <td class="cell100 column2">EXAMPLE2TABLE HD
                                    </br>EXAMPLE2TABLE SPORTS HD
                                    </br>EXAMPLE2TABLE EXTRA HD</td>
                                </tr>
                                <tr class="row100">
                                    <td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
                                    <td class="cell100 column2">EXAMPLE2TABLE.tv
                                    </br>EXAMPLE2TABLE TV
                                    </br>EXAMPLE2TABLE HD/SD
                                    </br>EXAMPLE2TABLE Kids
                                    </br>EXAMPLE2TABLE Kids Jr.</td></tr>
                        </tbody>
                    </table>
                </div>
</tbody></table>                                

<!--===============================================================================================-->  
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="js/main.js"></script>

<script>
function mySearchFunction() {
mySearchFunction2();
  // Declare variables 
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("ContactsTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
//tried to move content of function below here  
}

function mySearchFunction2() {

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("ProvidersTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

</body>
</html>

我应该如何修改我的搜索条码以同时影响 2 个表，而不仅仅是 1 个？

How should I modify my searchbar code in order to affect 2 tables at the same time, not only 1?

html

javascript

html-table

searchbar