搜索栏以查找多个手风琴中的行

Question

我有几个 HTML 表格隐藏在手风琴面板中，我需要搜索所有表格以找到一行，我是否错过了部署相应面板并突出显示相应行的内容？

这是我的代码：

function testSearch(){
        console.log("testresearch")
        let input = document.getElementById('searchbar').value
        input=input.toLowerCase();
        let x = document.getElementsByClassName('panel');
          
        for (i = 0; i < x.length; i++) { 
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display="none";
            }
            else {
                x[i].style.display="list-item";                 
            }
        }
    
    }

<input
    id="searchbar"
    onkeyup="testSearch()"
    type="text"
    name="search"
    placeholder="..."
  /><br />
  <button class="accordion button is-light">A</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody>
        <tr>
          <td>A</td>
          <td>A</td>
          <td>A</td>
        </tr>
      </tbody>
    </table>
  </div>

  <button class="accordion button is-light">B</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody>
        <tr>
          <td>B</td>
          <td>B</td>
          <td>B</td>
        </tr>
      </tbody>
    </table>
  </div>

结果不是我所需要的，我只是对我的 HTML 结构进行了一些更改，但我需要我的面板处于活动状态，然后我需要突出显示具有相应行的匹配输入

Answer 1

//  use this
let x = document.querySelectorAll('td');           //  select all <td> tags
//  instead
let x = document.getElementsByClassName('panel'); //  select first <div class="panel"> tag

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
</head>

<body>
    <input id="searchbar" onkeyup="testSearch()" type="text" name="search" placeholder="..." autocomplete=false/><br />
    <button class="accordion button is-light">A</button>
    <div class="panel" style="">
        <table class="dataframe table is-hoverable is-fullwidth clickable-table">
            <tbody>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                </tr>
            </tbody>
        </table>
    </div>

    <button class="accordion button is-light">B</button>
    <div class="panel" style="">
        <table class="dataframe table is-hoverable is-fullwidth clickable-table">
            <tbody>
                <tr>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function testSearch() {
            console.log("testresearch")
            let input = document.getElementById('searchbar').value
            input = input.toLowerCase();
            // let x = document.getElementsByClassName('panel');
            let x = document.querySelectorAll('td');    //  select all <td> tags instead of div.panel tag
            for (i = 0; i < x.length; i++) {            //  for loop
                if (!x[i].innerHTML.toLowerCase().includes(input)) {
                    x[i].style.display = "none";
                    x[i].style.background = "white";    //  setting background style to normal color
                }
                else if(input<=0){                      //  if input is empty
                    x[i].style.display = "initial";     //  set style to normal default
                    x[i].style.background = "white";    //  background to normal
                }
                else {                                  //  if input contains value that matches <td> value
                    x[i].style.display = "initial";     //  set style to normal default
                    x[i].style.background = "yellow";   //  set background color to YELLOW as same color of highlighted text
                }
            }

        }
    </script>
</body>

</html>

搜索栏以查找多个手风琴中的行

Search bar to find rows in several accordions

html

javascript

css

accordion

bulma