У меня есть страница, которая содержит динамически созданные таблицы. Идентификаторы этих таблиц, хранящиеся в БД, могут совпадать со значениями списка выбора на странице.

Все таблицы по умолчанию скрыты.

Я хочу показать и скрыть таблицы на основе выбранного значения параметра. Показать таблицу с соответствующим идентификатором для выбранного значения параметра и скрыть остальные, не соответствующие.

Код ниже работает для отображения таблицы соответствия. Но как скрыть таблицу, если она не соответствует выбранной опции?

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

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

            }
            });
2
IlludiumPu36 25 Окт 2019 в 07:40

3 ответа

Лучший ответ

Вы можете использовать конец с селектором атрибутов, чтобы скрыть все несоответствующие таблицы, имеющие идентификатор, заканчивающийся _table, см. Код ниже

Концы JQuery с 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 Окт 2019 в 04:43
if ($("#someid").attr("sometable") === "something") {
                // code
}
0
Rohit.007 25 Окт 2019 в 07:14

Вы можете попробовать это тоже.

$(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 Окт 2019 в 04:46
58552284