搜索栏可在多个手风琴中查找行

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

下面是完整代码：

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