Блог

Главная - Вопросы по программированию - jQuery скрывает неправильную таблицу

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

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

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

 <!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>

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

Комментарии:

1. $(«.tables»).hide(); скроет что-либо с помощью класса tables .

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

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

4. @DaveBriand Даже когда я помещаю таблицу в другой класс или без класса, она все равно скрыта

5.Одна таблица снаружи <body> , без начального <form> тега? Таблица без <td> <tr> этого кажется совершенно недопустимой

Ответ №1:

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

Ссылка на скрипку

Код:

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%;
}

Комментарии:

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

2. Это код, который я использовал для решения своей проблемы, однако я раскомментировал: display:none; и добавил: #none{display:table} В результате чего таблица x загружалась при запуске, а две другие скрывались

Ответ №2:

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

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

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

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

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

 $(".hideable").hide();

<table id='t1' align='center' class='tables hideable'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables hideable'>
*********TABLE 2***************
</table>

Ответ №3:

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

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

Измените свой селектор jQuery на этот:

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

Ответ №4:

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

Комментарии:

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

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