jQuery скрывает неправильную таблицу

-2

Я использую некоторый код для скрытия/раскрытия таблиц. Все хорошо, но я не могу найти, как остановить все таблицы, выполняемые этим кодом. У меня есть таблица 1, таблица 2 и таблица X, я хочу, чтобы таблица X присутствовала во все времена, однако я не могу понять, как это сделать.jQuery скрывает неправильную таблицу

<!DOCTYPE HTML"> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css"/> 
    <title>Add device</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript"> 
     \$(document).ready(function(){ 
     \$("#myDropdown").change(function(){ 
     target = \$\(this\).val(); 
     \$(".tables").hide(); 
     if(target != 'none'){ 
      \$("#" + target).show(); 
     }   
     return false; 
     }); 

     }); 
    </script> 
    <style type="text/css"> 
     table{ 
      width:100%; 
      display:none; 
     } 
     #content{ 
      width:100%; 
     } 
    </style> 
</head> 

<table id='none' class='tables' width='100%'> 
<tr> 
<td>**********TABLE X***********</td> 
</tr> 
</table> 
<body> 
<div id="content"> 
<p align = 'center'> 
Are you adding a chassis or a module?</br> 
<select id="myDropdown"> 
<option selected value="t3">Please Select</option> 
<option value="t1">Chassis</option> 
<option value="t2">Module</option> 
</select> 
</p> 
<table id='t1' align='center' class='tables'> 
*********TABLE 1*************** 
</table> 
<table id='t2' align='center' class='tables'> 
*********TABLE 2*************** 
</table> 
</form> 
</body> 
</html>

Я пробовал играть с классами и идентификаторами безрезультатно.

источник

2014-06-25 user3770935

$ (". Tables"). Hide(); будет скрывать что-либо с классом таблиц. –

Скрыть идентификатор или использовать определенные классы! –

Скрыть таблицы соответствующими таблицами с помощью CSS. Ваш HTML плохо сформирован. –

Добавить класс в таблицу, вы не хотите скрывать d использовать css .not селектор.

Link to fiddle

Код:

HTML:

<table id='none' class='tables no-hide-please' width='100%'> 
    <tr> 
     <td>**********TABLE X***********</td> 
    </tr> 
</table> 

<div id="content"> 
    <p align = 'center'> 
     Are you adding a chassis or a module?</br> 
     <select id="myDropdown"> 
      <option selected value="t3">Please Select</option> 
      <option value="t1">Chassis</option> 
      <option value="t2">Module</option> 
     </select> 
    </p> 
<table id='t1' align='center' class='tables'> 
    <tr> 
     <td>*********TABLE 1***************</td> 
    </tr> 

</table> 
<table id='t2' align='center' class='tables'> 
    <tr> 
     <td>*********TABLE 2***************</td> 
    </tr> 
</table>

JS:

$(document).ready(function(){ 
    $("#myDropdown").change(function(){ 
     target = $(this).val(); 
     $(".tables:not(.no-hide-please)").hide(); 
     if(target != 'none'){ 
      $("#" + target).show(); 
     }   
    }); 
});

CSS:

table{ 
    width:100%; 
    //display:none; 
} 
#content{ 
    width:100%; 
}

источник

2014-06-25 12:32:10 Calfy

Это великолепно, как я могу показать таблицу x, пока таблица 1 и таблица 2 скрыты при загрузке – user3770935

Это код, который я использовал для исправления моей проблемы Я раскопан: дисплей: нет; и добавлено: #none {display: table} Который оставил таблицу x для загрузки при запуске, а остальные два, чтобы скрыть – user3770935

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

Измените селектор jQuery для привязки к идентификатору таблицы, которую вы хотите скрыть, и только тот будет скрыт.

Чтобы скрыть первую и вторую таблицу, вы можете выбрать оба варианта.

$("#t1, #t2").hide();

Или создайте класс, который вы можете повторно использовать под названием «hidable» и показать/скрыть это. Затем вы можете применить этот класс к таблицам, к которым вы хотите применить это поведение.

источник

2014-06-25 12:21:36

Добавьте класс таблицы, которые вы хотите, чтобы быть видимым постоянно:

<table id='none' class='tables no_hide' width='100%'>

Изменение Вы селектором JQuery к этому:

$(".tables:not(.no_hide)").hide();

источник

2014-06-25 12:24:24 Turnip

-1

$('.tables:not(#none)').hide();

источник

2014-06-25 12:24:47

Мне интересно, как этот правильный ответ может получить 2 downvotes –

Потому что это плохая практика. Он будет привязан ко всем таблицам, созданным в будущем, и скрыть их, возможно, не намерение. Лучше всего привязываться к фактическим таблицам, которые вы хотите скрыть, а не просто скрывать все, кроме одного, что ненадежно. –

В этом вопросе нет ничего, связанного с * таблицами, созданными в будущем * –

jQuery скрывает неправильную таблицу

ответ

Смежные вопросы