JQuery toggle-Zeilen klicken

Ich versuche zu verstecken/zeigen, eine Teilmenge der Zeilen, wenn Sie auf eine Zeile mit einer bestimmten id.

Durch viel recherche im web und eine Menge versucht, ich habe den folgenden code ein.

Einzige problem ist dieser code für einige Grund nur versteckt/zeigt die ersten Zeilen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
           <title>Test</title>

           <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>

           <script type="text/javascript">

             $(document).ready(function()
             {
                 $('#rowToClick').click(function ()
                 {
                     $(this).nextAll('tr').each( function()
                     {
                         if ($(this).is('#rowToClick'))
                        {
                           return false;
                        }
                        $(this).toggle();
                     });
                 });
             });
           </script>
         </head>          

<body>
<table>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr1"><td>Toggled</td></tr>
    <tr id="Tr2"><td>Toggled</td></tr>
    <tr id="Tr3"><td>Toggled</td></tr>
    <tr id="Tr4"><td>Toggled</td></tr>
    <tr id="Tr5"><td>Toggled</td></tr>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr6"><td>Toggled</td></tr>
    <tr id="Tr7"><td>Toggled</td></tr>
    <tr id="Tr8"><td>Toggled</td></tr>
    <tr id="Tr9"><td>Toggled</td></tr>
    <tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>

</html>

Jemand einen Vorschlag und/oder umschreiben des Codes?

---------- Update - Endgültige Lösung -----------

Landete ich mit die folgende Lösung basiert auf Brandon ' s input, wie ich wollte, mehr zu tun, Schachteln mit dem gleichen Verhalten, wie eine Art von reduzierbaren Struktur-Ansicht.
Leider, das bedeutete, ich musste ein zusätzliches Attribut zu verfolgen, der Staat, aber damit kann ich Leben, für jetzt, bis ich einen anderen Weg finden (BSP. überprüfen Sie die Sichtbarkeit der nächsten Zeile).

         $(document).ready(function () {
             toggleRows('.module','.namespace');
             toggleRows('.namespace','.type');
             toggleRows('.type','.member');
         });

         function toggleRows(parentClass,subClass)
         {
            $(parentClass).click(function () {

                if( $(this).attr("value")=="collapsed")                 
                {
                  $(this).attr("value","expanded");
                  $(this).nextUntil(parentClass).filter(subClass).toggle(true);
                }
                else
                {
                  $(this).attr("value","collapsed");
                  $(this).nextUntil(parentClass).attr("value","collapsed");
                  $(this).nextUntil(parentClass).toggle(false);
                }       

            });
         }

Haben Sie daran gedacht, mit einem plugin wie tablesorter? blog.pengoworks.com/index.cfm/2008/3/28/...
Verwenden .Daten() statt .attr(). Seine mehr konform: $(this).data("value") und $(this).data("value", "expanded"). Auch, Kette Ihre Anrufe zu vermeiden, das Scannen des DOM-2x: $(this).nextUntil(parentClass).data("value","collapsed").toggle(false);

InformationsquelleAutor Christian Mikkelsen | 2011-03-29

Ersten, können Sie nicht mehrere Zeilen mit der gleichen id. Statt die id zu "rowToClick", setzen Sie die css-Klasse:

<tr class='rowToClick'><td>click me</td></tr>

Weiter sollte diese Arbeit:

$(document).ready(function()
         {
             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
         });

InformationsquelleAutor Brandon

2

dies ist, weil das id-Attribut kann nur verwendet werden, einmal für jede id in einem Dokument. sollten Sie mit dem class-Attribut statt, und dann in deinem jquery-code, der Zugriff auf die Elemente mit der Klasse rowToClick mit dem $(".rowToClick") Selektor.

Hoffe, das hilft.

Andy

InformationsquelleAutor Andbdrew
1
- Werfen Sie einen Blick bei dieser Geige
  
  Mit der :not() - Selektor können Sie auswählen, alle tr Elemente, die nicht über die id/Klasse, die Sie wollen, herausgefiltert:
```
$('.rowToClick').click(function ()
{
    $('tr:not(.rowToClick)').toggle(); 
    //toggle all rows on the page that 
    //do not have the class rowToClick
});
```
- Beachten Sie, dass Sie können nicht zwei Elemente mit demselben id - haben Sie zwei Zeilen mit der id rowToClick. Verwenden Sie eine class statt.
InformationsquelleAutor no.good.at.coding

Ich glaube, das ist das gewünschte Verhalten:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

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

            //Also, just as an extra, use "context" to limit the scope of any jQuery selector-search.
            //That way on large pages your selector doesn't search through the whole page,
            //it only searches the tables HTML.
            //Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger');
            var context = $('#tblMyTable'); 

            $('tr.clickTrigger', context).click(function() {

                $(this).nextAll('tr').each(function() {

                    if ($(this).is('tr.clickTrigger'))
                        return false;

                    $(this).toggle();
                });
            });
        });
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblMyTable" cellpadding="0" cellspacing="0">
            <tr class="clickTrigger">
                <td>ClickMe</td>
            </tr>
            <tr id="Tr1">
                <td>Toggled</td>
            </tr>
            <tr id="Tr2">
                <td>Toggled</td>
            </tr>
            <tr id="Tr3">
                <td>Toggled</td>
            </tr>
            <tr id="Tr4">
                <td>Toggled</td>
            </tr>
            <tr id="Tr5">
                <td>Toggled</td>
            </tr>
            <tr class="clickTrigger">
                <td>ClickMe</td>
            </tr>
            <tr id="Tr6">
                <td>Toggled</td>
            </tr>
            <tr id="Tr7">
                <td>Toggled</td>
            </tr>
            <tr id="Tr8">
                <td>Toggled</td>
            </tr>
            <tr id="Tr9">
                <td>Toggled</td>
            </tr>
            <tr id="Tr10">
                <td>Toggled</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

InformationsquelleAutor Prisoner ZERO

Ich würde schalten Sie Ihren code so etwas wie dieses:

<tr class="rowToClick" rel="1"><td>ClickMe</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="rowToClick" rel="2"><td>ClickMe</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>

Dann, so etwas wie dieses:

$('.rowToClick').click(function()
{
    var rel = $(this).attr('rel');

    $('.row' + rel + 'Collapse').show(); //or hide, you get the idea
});

InformationsquelleAutor Tejs

<script>
    function padre(id){
                         var pa=$('.rowToClick_'+id);
                         $(pa).nextAll('tr').each( function(){
                            if ($(this).is('.rowToClickEnd_'+id))
                            {
                                $(this).toggle();
                                return false;
                            }
                            $(this).toggle();
                        });   
                     }
               </script>

    <table>
        <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr>
        <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr>
        <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr>
        <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr>
        <tr id="Tr2"><td>Categoria 1_2</td></tr>
        <tr id="Tr3"><td>Categoria 1_3</td></tr>
        <tr id="Tr4"><td>Categoria 1_4</td></tr>
        <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr>
        <tr class="rowToClick"><td>ClickMe</td></tr>
        <tr id="Tr6"><td>Toggled</td></tr>
        <tr id="Tr7"><td>Toggled</td></tr>
        <tr id="Tr8"><td>Toggled</td></tr>
        <tr id="Tr9"><td>Toggled</td></tr>
        <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr>
    </table>

Es gilt für verschiedene Ebenen
fügen Sie einige Infos darüber, wie Ihre Antwort funktioniert. es wird anderen helfen.

InformationsquelleAutor Gaston Nina

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.