Heutzutage gibt es beim Erstellen einer statischen Seite eine Anforderung, das heißt, es gibt eine Reihe von Optionsfeldern mit zwei Optionen und eine Liste mit 6 Zeilen auf der Seite (die Liste wird mit dem Table-Tag implementiert, nicht mit DIV). Wenn die Option des Optionsfelds ausgewählt ist, werden für einen Moment die ersten drei Informationen in der Liste angezeigt und die letzten drei Informationen werden ausgeblendet. Wenn Option 2 des Optionsfelds ausgewählt wird, werden die ersten drei Informationen angezeigt Die Einträge in der Liste werden ausgeblendet und die letzten drei Informationen werden angezeigt. Das bringt uns zum heutigen Thema: Wie erreicht man das? Auf welche anderen Szenarien kann diese Implementierung nach der Implementierung angewendet werden?
1. First-Response-Lösung
Nachdem ich auf diese Anforderung gestoßen war, war meine erste Reaktion, dass es sehr einfach sei, zwei DIVs zu verwenden, um die TR-Tags in die ersten drei Tabellen und die letzten drei TR-Tags einzuschließen und dann die Anzeige der DIVs über JS zu steuern.
Schritt eins: Verwenden Sie DIV-Umbruch, um den angezeigten TR auszublenden. Der Code lautet wie folgt:
<table> <div id="divName"> <tr> <td>姓名：</td> <td><input id="txtname" type="text" /></td> </tr> </div> <div id="divSex"> <tr> <td>年龄：</td> <td><input id="txtsex" type="text" /></td> </tr> </div> </table>
Schritt 2: Verwenden Sie JS, um die Anzeige von DIV zu steuern, um den Effekt des Ausblendens oder Anzeigens von Zeilen zu erzielen:
$("#divName").style.display = "none";
$("#divSex").style.display = "block"
Schritt 3: Führen Sie das Programm aus, Sie werden feststellen, dass es überhaupt nicht funktioniert, haha, es fühlt sich ein bisschen an, als würde man sich täuschen~! Denn das TR-Tag kann nur mit dem TABLE-Tag verwendet werden! Ok, obwohl der obige Code nicht funktioniert! Aber es spielt immer noch eine leitende Rolle. Scheitern ist ein Erfolg!
2. Empfohlene Panel-Lösung
Dies geschah, nachdem ich beschrieben hatte, dass DIV und TR nicht zusammen verwendet werden können, und ich wurde von meinen Kollegen ausgelacht. Hey, es scheint, dass ich in Zukunft mehr über HTML lernen muss, nachdem ich mich ausgelacht habe Ning sagte mir, ich solle TR mit PANEL control umschließen und das Visible-Attribut verwenden, um die Ausgabe von TR auf Serverebene zu steuern.
Schritt eins: Verwenden Sie das PANEL-Steuerelement, um das TR-Tag zu umschließen, das zum Ein- oder Ausblenden verwendet wird. Der Code lautet wie folgt:
<table> <asp:Panel ID="plName" runat="server"> <tr> <td>姓名：</td> <td><input id="txtname" type="text" /></td> </tr> </asp:Panel> <asp:Panel ID="plSex" runat="server" > <tr> <td>年龄：</td> <td><input id="txtsex" type="text" /></asp:Panel></td> </tr> </asp:Panel> </table>
Schritt 2: Verwenden Sie die Visible-Eigenschaft des Panel-Steuerelements auf der Serverseite, um die Ausgabe der Zeilen zu steuern. Der Code lautet wie folgt:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
string val = RadioButtonList1.SelectedValue;
switch (val)
{
case "Name":
plName.Visible = true;
plSex.Visible = false;
break;
case "Sex":
plName.Visible = false;
plSex.Visible = true;
break;
default:
plName.Visible = true;
plSex.Visible = true;
break;
}
}
3. Unsinnige Lösung
Schauen wir uns also zunächst diese Idee an. Weisen Sie jedem TR-Tag einen Klassenstil zu. Dieser Stil wird jedoch nicht implementiert.
Schritt eins: Fügen Sie dem TR-Tag einen nicht implementierten Klassenstil hinzu. Der Code lautet wie folgt:
<table id="MyList"> <tr class="NameCSS"> <td>姓名：</td> <td><input id="txtname" type="text" /></td> </tr> <tr class="SexCss"> <td>年龄：</td> <td><input id="txtsex" type="text" /></td> </tr> </table>
Schritt 2: Verwenden Sie Jquery, um das TR-Element basierend auf der Klasse abzurufen und dessen Ausblenden oder Anzeigen zu steuern. Der Code lautet wie folgt:
var $rowsName = $("#MyList").find(".NameCSS");
var $rowsSex = $("#MyList").find(".SexCss");
switch (selectedValue)
{
case "Name":
$rowsSex.hide();
$rowsName.show();
break;
case "Sex":
$rowsSex.show();
$rowsName.hide();
break;
} Schritt 3: Ausführen, es gibt überhaupt kein Problem, dieses Problem ist gelöst!
4. Implementieren Sie die Anwendungsszenarien von Lenovo gemäß der dritten Lösung
Da wir nun das Anzeigen und Ausblenden von TR in TABLE steuern können, können wir uns den Datenteil des ASP.NET GridView-Steuerelements vorstellen, der nach der Datenbindung an den Browser ausgegeben und auch in Form von TR angezeigt wird , damit wir das Anzeigen und Ausblenden von GridView-Inhalten steuern können? Natürlich kein Problem.
Schritt eins: Wie füge ich Klassenattribute zu GridView-Datenzeilen hinzu? Wir können den Zeilenstil von GridView (
<asp:GridView ID="GridView1" runat="server"> <RowStyle CssClass="test" /> </asp:GridView>
Schritt 2: Daten binden, der Code lautet wie folgt:
if (!IsPostBack)
{
List<Student> sList = new List<Student>()
{
new Student(){ SID = "s001", SName="张三", SSex="男"},
new Student(){ SID = "s002", SName="李四", SSex="女"},
new Student(){ SID = "s003", SName="王五", SSex="男"}
};
GridView1.DataSource = sList;
GridView1.DataBind();
}
} Schritt 3: Fügen Sie eine Schaltfläche hinzu, um die Anzeige oder das Ausblenden von GridView-Daten zu steuern. Der Code lautet wie folgt:
<input id="btn" type="button" value="隐藏" onclick="ShowDate()" />
Schritt 4: Implementieren Sie die JS-Methode, um das Anzeigen und Ausblenden zu steuern. Der Code lautet wie folgt:
function ShowDate() {
var val = $("#btn").val();
var $rows = $("#GridView1").find(".test");
switch (val) {
case "隐藏":
$rows.hide();
$("#btn").val("显示");
break;
case "显示":
$rows.show();
$("#btn").val("隐藏");
break;
}
} Die oben genannten vier Methoden sind eng miteinander verbunden und miteinander verbunden. Ich hoffe, dass jeder sie sorgfältig probieren, sorgfältig darüber nachdenken, sie sich wirklich zu eigen machen und sie auf sein Studium anwenden kann.
