"Bootstrap Search Table"
Bootstrap 4.1.1 Snippet by yudiwbs

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container search-table"> <div class="search-box"> <div class="row"> <div class="col-md-3"> <h4>Nama atau kode emiten</h4> </div> <div class="col-md-9"> <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder=" misalnya ADRO"> <script> $(document).ready(function () { $("#myInput").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </div> </div> </div> <div class="search-list"> <h3>3 Informasi terpenting tentang ADRO (Adaro Energy Tbk.) </h3> <table class="table" id="myTable"> <tbody> <tr> <td> ADRO mengalami penurunan <a href=""> pendapatan (eps) </a> di tahun 2018 sebesar -14%. Sejak tahun 2012, pertumbuhan EPS rata-rata 15%. EPS mengalami penurunan di tahun 2013 sd 2015 tetapi naik drastis di tahun 2016 <br> <div class="info"> <a href=""> [info lebih lanjut] </a> </div> </td> </tr> <tr> <td> ADRO termasuk masih sangat likuid. <a href=""> Debt equity ratio (DER) </a> = 66%, <a href=""> Cash Ratio (CR) </a> = 168% dan <a href=""> Current Ratio (CRR) </a> =180% <br> <div class="info"> <a href=""> [info lebih lanjut] </a> </div> </td> </tr> <tr> <td> ADRO relatif murah. <a href="">Nilai PER-nya </a> 7.15, padahal PER median ADRO dari 2012 adalah 16.11. Saat ini PER rata-rata <a href=""> LQ45 </a> adalah 24.52 dan PER <a href=""> JCI </a> adalah 15.2 <br> <div class="info"> <a href=""> [info lebih lanjut] </a> </div> </td> </tr> </tbody> </table> </div> </div>
.search-table{ padding: 10%; margin-top: -6%; } .search-box{ background: #c1c1c1; border: 1px solid #ababab; padding: 3%; } .search-box input:focus{ box-shadow:none; border:2px solid #eeeeee; } .search-list{ background: #fff; border: 1px solid #ababab; border-top: none; } .search-list h3{ background: #eee; padding: 3%; margin-bottom: 0%; } .info{ font-size:10pt; padding: 2%; margin-bottom: 0%; }

Related: See More


Questions / Comments: