Вопросы Теги

Складной стол в jQuery

Я пытаюсь сделать таблицу, которая имеет строки заголовков, которые могут быть свернуты и развернуты при помощи jQuery. Вот полнота моего кода к настоящему времени:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").each(function() {
         $(this).slideToggle("fast");
      });
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr id="cat1" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat2" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

</body>                                                                 
</html>

Если я корректен, часть jQuery в английских чтениях как: "Когда строка, которая имеет идентификатор 'cat1' и класс 'заголовка', нажата, найдите все строки, которые имеют идентификатор 'cat1' и класс 'ребенка', и для каждого, slideToggle".

Все же, когда я выполняю его и нажимаю на строку заголовка, ничего не происходит. Понимание?

Править: Добавленный вторая категория к HTML-таблице. Извините, я должен был быть более конкретным. Я хочу смочь нажать на строку заголовка для конкретной категории и иметь только те дочерние строки коллапс, не все дочерние строки на странице. Таким способом таблица ведет себя как "accordian", и строки группируются по категориям.

5
задан David Hague 31 December 2009 в 14:54
поделиться

3 ответа

Это приведет к тому, что клик коснется только строк в таблице, содержащей заголовок, на который вы кликнули, что означает, что вы можете изменить его для работы с классом css, вместо того, чтобы дублировать id. 

$("tr#cat1.header").click(function () { 
   $("tr#cat1.child", $(this).parent()).slideToggle("fast");
});

В основном this - это заголовок, который щелкнул, мы обернем его в объект jQuery и вызовем parent() (который возвращает таблицу), а затем укажем его в качестве контекста для нового запроса.

Ваша страница теперь выглядит примерно так:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
</body>                                                                 
</html>
8
ответ дан 18 December 2019 в 13:14
поделиться

Во-первых, не следует дублировать идентификаторы строк. ID должны быть уникальными для каждого элемента на странице.

Также не следует использовать каждый, так как jQuery автоматически применит функцию slideToggle к каждому элементу, совпадающему с селектором. Я бы предложил отказаться от идентификаторов и использовать вместо них имена классов:

$("tr.header").click(function () { 
   $("tr.child").slideToggle("fast");
});

Если вы хотите убедиться, что только определенные таблицы могут выполнять эту функцию переключения, поместите класс на таблицу и обновите селекторы:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
---

$(".collapsible tr:first").click(function () { 
   $(this).nextAll().slideToggle("fast");
});

Ответ на редактирование:

Ответ Рори правильный, я просто расширяю его. Если вы используете несколько таблиц, вы можете удалить CSS-классы из s в строках и упростить таблицы до:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Cat1</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

<table class="collapsible">
    <tr>
        <td>Cat2</td>
        <td>Cat2</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

и jQuery до:

$(".collapsible tr:first").click(function () {  
   $(this).nextAll().slideToggle("fast"); 
});
7
ответ дан 18 December 2019 в 13:14
поделиться

Разве не должно быть больше так? Обычно это весь документ.

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").slideToggle("fast");
   });
-1
ответ дан 18 December 2019 в 13:14
поделиться