2010-05-22 14 views
28

Ich verberge eine Reihe von Textfeldern und es funktioniert gut, das Problem ist, die Textfelder sind in einer Tabelle, so dass ich auch die entsprechenden Etiketten ausblenden muss. die Struktur ist so etwas wie diesesJquery Tabellenzeilen ausblenden

<tr> 
<td> 
Label 
</td> 
<td> 
InputFile 
</td> 
</tr> 

in der Tat es ist nur einfacher, wenn ich die Zeilen verstecken, die einen fileinput haben, kann jemand helfen

+1

Können Sie klären genau das, was 'fileinput' oder 'Eingabedatei' eigentlich bezieht? Ist es ein 'input type = "text"' mit einer bestimmten Klasse oder ein 'input type = "file"'? –

Antwort

56

dies könnte für Sie arbeiten ...

$('.trhideclass1').hide(); 

 

<tr class="trhideclass1"> 
    <td>Label</td> 
    <td>InputFile</td> 
</tr> 
+0

Meiner Meinung nach ist es am besten, das Markup so sauber und prägnant wie möglich zu halten, sowohl für die Wartung als auch für die Lesbarkeit. –

+2

(Auch die Absicht der Frage ist sicherlich 'Wie verberge ich ein Element, das ein bestimmtes Element enthält' nicht nur 'Wie verberge ich ein Element mit einer gegebenen Klasse') –

+1

Danke Derek, deine Antwort war die beste Lösung in Dieser Fall – tomasz

1

bitte Wenn das Etikett in einer Tabellenzeile ist, dass Sie dies tun können, um ausblenden der Reihe:

('.InputFile').parent().Hide() 

Sie Ihre Wähler verfeinern, wie Sie benötigen und dann die Tabellenzeile erhalten, die dieses Element enthält.

JQuery Selektoren Hilfe: http://api.jquery.com/category/selectors/

EDIT Dies ist der richtige Weg, es zu tun.

('.InputFile').parents('tr').hide() 
+0

-1 Das übergeordnete Element des Eingabesteuerelements wäre '', und die Verbergen-Methode ist kleingeschrieben. –

20

Sie müssen nur den DOM-Baum zum nächsten <tr> wie so zu durchqueren bis ...

$("#ID_OF_ELEMENT").parents("tr").hide(); 

jQuery API Reference

+1

Ich denke, dass sollte Eltern sein(), nicht übergeordnete() –

+0

Down vote -1. parent() übernimmt das erste Element. eltern() ist die richtige Verwendung. – ICodeForCoffee

+0

@Bobby @ICodeForCoffee Ihr habt recht; Ich habe meine Antwort aktualisiert –

2

$('inputFile').parent().parent().children('td > label').hide();

können Sie hoch Ebene zwei Ebenen helfen (TD, zu TR) bewegen zwei Ebenen wieder nach unten (alle TDs in dieser TR und ihre Label-Tags), gibt die hide() Funktion anwenden.

wenn man sich die TR-Ebene bleiben wollen und sie zu verstecken:

$('inputFile').parent().parent().hide();

... ausreichend ist.

Sie können sehr einfach durch die Elemente mit den jquery Selektoren navigieren.

Eltern hier dokumentiert ist: http://api.jquery.com/parent/

Haut wird hier dokumentiert: http://api.jquery.com/hide/

0

Ich denke, die beste Wahl, wenn Sie sowohl Textfeld und Label wollen gleichzeitig zu verbergen ist jeweils mit einer Klasse zuweisen und verstecken sie wie folgt:

jQuery(".labelClass, .inputClass").hide(); 
1

Mit parents('tr').hide() funktioniert. Wenn jedoch eine eingebettete Tabelle vorhanden ist, werden alle übergeordneten Zeilen tr ausgeblendet. In meinem Fall ist das gesamte Formular ausgeblendet, da viele eingebettete Tabellen vorhanden sind.

8

Dies sollte den Trick tun.

$(textInput).closest("tr").hide(); 
2

html

<tr><td><a href="" onclick=hideRow(event)></a></td></tr> 

jquery

function hideRow(event){ 
    $(event.target || event.srcElement).parents('tr').hide(); 
} 
Verwandte Themen