Ein - /ausblenden Tabellen mit jQuery

Ich habe eine Reihe von Tabellen, ähnlich den folgenden html-code:

<table id="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table id="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

Möchte ich die Tabellen erweitern Sie individuell bei der jeweiligen Leiter (<th>) geklickt wird. Außerdem werden die Tabellen beginnen sollte verkleinerte. Ich benutze folgende jQuery-Skript:

$(document).ready(function(){
    $('#film td').hide();
});

$(document).ready(function(){
var n1 = 0;
      $('#film th.1').click(function(){
         if(n1 == 0){
         $('#film td.1').show();
         n1 = 1;
         }else{
        $('#film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('#film th.2').click(function(){
         if(n2 == 0){
         $('#film td.2').show();
         n2 = 1;
         }else{
        $('#film td.2').hide();
         n2 = 0;}
       });
});

Wenn ich mir jedoch führen nur die top-Tabelle ist in der Lage zu zeigen/verbergen, nicht die zweite.
Kann jemand sehen, wo ich bin mache ich falsch?

Sind Sie immer irgendwelche JavaScript-Fehler?
Warum die seltsame Einrückung?

InformationsquelleAutor Andreas Jarbol | 2011-09-14

10

Sind Sie mit der gleichen id auf mehreren Elementen. Wenn Sie die Suche nach id, jQuery wird nur ein Element (das erste mit id). Also dein code wirkt nur auf den ersten Tisch. Verwenden Sie eine Klasse, die auf den Tischen statt einer id.
```
<table class="film">......</table>

$('.film').each(function(f) {
    //this function will execute for each element with the class "film"
    //refer to the current element during this function using "$(this)"
});
```
InformationsquelleAutor yoozer8
6

Einen viel einfacheren Weg dies zu tun ist die Verwendung einer Klasse statt einer id für die table Werte. Auf diese Weise können Sie bezeichnet werden als eine Gruppe leichter
```
<table class="film"> ... 
```
Nachdem, welche der folgenden jquery-sollte Ihnen das Verhalten, das Sie suchen
```
$(document).ready(function() {
    $('.film td').hide();
    $('th').click(function() {
       $(this).parents('table').find('td').toggle();
    }); 
});
```
Fiddle: http://jsfiddle.net/WZUAZ/1/

InformationsquelleAutor JaredPar

Hier ist eine funktionierende version: http://jsfiddle.net/6Ccj7/

Dein html ist kaputt. Ändern Sie diese:

<td class"2">//BODY CONTENT 2//</td>

<td class="2">//BODY CONTENT 2//</td>

Auch, Sie verwendeten id für film wenn in der Tat Sie haben 2 Instanzen. Sie Klasse statt:

<table class="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table class="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

Hier ist die aktualisierte JS:

$(document).ready(function(){
$('.film td').hide();});

$(document).ready(function(){
var n1 = 0;
      $('.film th.1').click(function(){
         if(n1 == 0){
         $('.film td.1').show();
         n1 = 1;
         }else{
        $('.film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('.film th.2').click(function(){
         if(n2 == 0){
         $('.film td.2').show();
         n2 = 1;
         }else{
        $('.film td.2').hide();
         n2 = 0;}
       });
});

InformationsquelleAutor Allen Liu

1

Zwei Probleme:

Ersten, Dein HTML ist kaputt

Ändern
```
 <td class"2">//BODY CONTENT 2//</td>
```
Zu
```
 <td class="2">//BODY CONTENT 2//</td>
```
Zweite, HTML-id ' s eindeutig sein sollte, so schlage ich vor, mit Klassen statt.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/jkohnen/tBkh4/

Die ich verwendet habe .toggle() zu vereinfachen, werden die jQuery-ein bisschen

Hoffe, das hilft, und Happy Coding.

Schönen Dank einer million! Andreas.

InformationsquelleAutor Justin Kohnen
1

ein - /ausblenden Tabelle mit jquery

Code hier !
ich verwendeslideToggle + data attr

InformationsquelleAutor

Mit diesem jQuery können Sie show & ausblenden

$("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

html

<button id="hide">Hide</button>
<button id="show">Show</button>

InformationsquelleAutor Madhuka Dilhan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.