Carlosp

ya mt simples e funcional tb saquei para mim obrigado :D

Olá tenho aqui uma duvida que não estou a conseguir seguir em frente por isso. tenho um caixa de search que faz uma procura dentro de uma tabela e mostra os resultados consoante escrevo a procura, até aqui tudo bem a única coisa que me falta, que eu queria implementar era que as tabelas só aparecessem ao iniciar a pesquisa como ele faz, não no load da pagina. O javascripts faz a fitra tudo bem mas fica todas as tabelas visíveis quando entro no html. consegui esconder a tabela com comandos HTML mas a procura depois fica insegura tanto mostra as tabelas como não. Deixo aqui o HTML e o js se alguém me conseguir ajudar agradeço imenso. sou novo em .js Obrigado html codigo <section class="container"> <input type="search" class="table-filter" data-table="order-table" placeholder="Filter" > <table class="order-table table"> <tbody> <tr> <td>John</td> <td>john.doe</td> </tr> <tr> <td>Jane Vanda</td> <td>jane@vanda</td> </tr> <tr> <td>Alferd Penyworth</td> <td>alfred</td> </tr> </tbody> </table> </section> javascripts codigo (function(document) { 'use strict'; var TableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, function(table) { Arr.forEach.call(table.tBodies, function(tbody) { Arr.forEach.call(tbody.rows, _filter); }); }); } function _filter(row) { var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; } return { init: function() { var inputs = document.getElementsByClassName('table-filter'); Arr.forEach.call(inputs, function(input) { input.oninput = _onInputEvent; }); } }; })(Array.prototype); document.addEventListener('readystatechange', function() { if (document.readyState === 'complete') { TableFilter.init(); } }); })(document);