微件:表格搜索

 <input type="text" class="global-search-box" placeholder="搜索表格..." 
        style="width: 300px; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;" />
 

<script> (function() {

 // 获取当前微件实例的容器
 var container = document.currentScript.closest('.table-search-global');
 
 // 获取搜索框和表格
 var searchBox = container.querySelector('.global-search-box');
 var table = container.querySelector('.global-table-container table.wikitable');
 
 if (searchBox && table) {
   searchBox.addEventListener('keyup', function() {
     var searchTerm = this.value.toLowerCase().trim();
     var rows = table.querySelectorAll('tbody tr');
     
     rows.forEach(function(row) {
       // 跳过表头行
       if (row.querySelector('th')) return;
       
       var rowText = row.textContent.toLowerCase();
       if (searchTerm ===  || rowText.includes(searchTerm)) {
         row.style.display = ;
       } else {
         row.style.display = 'none';
       }
     });
   });
 }

})(); </script>

<style> .table-search-global table.wikitable {

 width: 100%;
 border-collapse: collapse;

}

.table-search-global table.wikitable th {

 background-color: #f8f9fa;
 font-weight: bold;

}

.global-search-box:focus {

 outline: none;
 border-color: #36c;
 box-shadow: 0 0 0 1px #36c;

} </style>