Saya memiliki halaman yang berisi tabel yang dibuat secara dinamis. ID tabel ini, yang disimpan dalam DB, dapat cocok dengan nilai daftar pilih di halaman.

Semua tabel disembunyikan secara default.

Saya ingin menampilkan dan menyembunyikan tabel berdasarkan nilai opsi yang dipilih. Tampilkan tabel dengan ID yang cocok dengan nilai opsi yang dipilih, dan sembunyikan yang lain tidak cocok.

Kode di bawah ini berfungsi untuk menampilkan tabel yang cocok. Tetapi bagaimana cara menyembunyikan tabel jika tidak cocok dengan opsi yang dipilih?

$('#unit_table').hide();

$('#program_levels').change(function(){
            if($("#" + this.value + "_table").is(":hidden")){
                $("#" + this.value + "_table").show();
            } else {

            }
            });
2
IlludiumPu36 25 Oktober 2019, 07:40

3 jawaban

Jawaban Terbaik

Anda dapat menggunakan ujung dengan pemilih atribut untuk menyembunyikan semua tabel yang tidak cocok dengan id diakhiri dengan _table, lihat kode di bawah ini

JQuery Berakhir dengan Atribut Selector API

$('#unit_table').hide();

$('#program_levels').change(function(){
    //hide all tables 
    $("table[id$='_table'").hide();
    //show all matching tables only
    //if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
         $("#" + this.value + "_table").show();
    //} 
 });
4
Bhushan Kawadkar 25 Oktober 2019, 04:43
if ($("#someid").attr("sometable") === "something") {
                // code
}
0
Rohit.007 25 Oktober 2019, 07:14

Anda dapat mencoba ini juga.

$(document).ready(function(){
   $(".jsTable tr").hide();
   $(".jsSelect").change(function(){
     var oVal = $(this).val();
      $(".jsTable tr").hide();
     if(oVal!="")
     {
      $(".jsTable tr[id="+oVal+"]").show();
     }
   })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>

<h2>Show hide</h2>
<select class="jsSelect">
  <option value="">Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<br/>
<table class="jsTable"> 
  <tr id="A">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
 <tr id="B">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
 <tr id="C">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr id="D">
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>  
</table>

</body>
</html>
1
jishan siddique 25 Oktober 2019, 04:46