<style type="text/css"> #table, #table td { border: 1px solid black; } </style> <script src="jquery-3.3.1.js"></script> <script> var data = [ {id: 1, col1: 'qw1-col1', col2: 'ui1-col2'}, {id: 2, col1: 'er2-col1', col2: 'op2-col2'}, {id: 3, col1: 'rt3-col1', col2: 'as3-col2'}, {id: 4, col1: 'ty4-col1', col2: 'sd4-col2'}, {id: 5, col1: 'yu5-col1', col2: 'df5-col2'}, ]; $('#search').on('keyup', function() { var val = $(this).val(), t = $('#table'); try { var regex = new RegExp(val, 'i'); $('tr', t).each(function() { var row = $(this), hide = true; $('td', row).each(function() { if ($(this).text().match(regex)) hide = false; }); if (hide) row.hide(); else row.show(); }); } catch(err) { } }); $(function() { var t = $('#table'); t.html(''); data.forEach(function(row) { var r = $('<tr>'); Object.values(row).forEach(function(cell) { r.append($('<td>').html(cell)); }); t.append(r); }); }); </script> </head> <body> <div><input type='text' id='search'></div> <table id='table'></table> |