There is a requirement when working on a static page today, which is that there is a set of radio buttons with two options and a list with 6 lines on the page (the list is implemented with Table tags, not DIV). When the option 1 of the radio button is selected, the first three pieces of information in the list are displayed, and the last three pieces of information are hidden. When the option 2 of the radio button is selected, the first three pieces of information in the list are hidden, the last three pieces of information in the list are displayed. So it involves our topic today. How to achieve it? What other scenarios can the implementation be applied to after implementation?
1. Solution to the first reaction
After encountering this requirement, my first reaction was that it was very simple. I used two DIVs to wrap the TR tags in the first three Tables and the last three TR tags, and then controlled the display of the DIV through JS.
Step 1: Use DIV packages to hide the displayed TR. The code is as follows:
<table> <div > <tr> <td>Name：</td> <td><input type="text" /></td> </tr> </div> <div > <tr> <td>age：</td> <td><input type="text" /></td> </tr> </div> </table>
Step 2: Use JS to control the display of DIV to achieve the effect of controlling hidden or displayed lines:
$("#divName"). = "none";
$("#divSex"). = "block";Step 3: Run the program and you will find that it doesn’t work at all. Haha, it feels like you’re being fooled~! Because TR tags can only be used with TABLE tags! OK, although the above code doesn't work! But it still plays a guiding role. Failure is a success!
2. Recommended Panel solution
This was a joke by my colleague after I described that DIV and TR cannot be used in combination. Alas, it seems that I will learn more HTML in the future. After the joke, my colleague Dong Ning told me to use the PANEL control to wrap TR and use the Visible attribute to control the output of TR at the server level.
Step 1: Use the PANEL control to wrap the TR tags used to display or hide. The code is as follows:
<table> <asp:Panel ID="plName" runat="server"> <tr> <td>Name：</td> <td><input type="text" /></td> </tr> </asp:Panel> <asp:Panel ID="plSex" runat="server" > <tr> <td>age：</td> <td><input type="text" /></asp:Panel></td> </tr> </asp:Panel> </table>
Step 2: Use the Visible property of the Panel control to control the output of the line on the server side, the code is as follows:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
string val = ;
switch (val)
{
case "Name":
= true;
= false;
break;
case "Sex":
= false;
= true;
break;
default:
= true;
= true;
break;
}
} Although this method is not a problem, it still feels too nonsense, right? Should the control page display code also be done by the server? Too wasteful performance! Moreover, the page-controlled code and logical interaction code are simply chaotic. When vetoing this method, our hero, Comrade Waiwai, came on stage. I have to admire him. As a project manager, Waiwai has a better foundation in writing code than programmers. There is no need for code prompts. Purely typing the keyboard with clear ideas and perfectly solving this problem!
3. Non-factual solution
So, let’s look at this idea. First, give each TR tag a class style, but this style is not implemented, just obtain the identifier of the TR.
Step 1: Add a class style to the TR tag that is not implemented. The code is as follows:
<table > <tr class="NameCSS"> <td>Name：</td> <td><input type="text" /></td> </tr> <tr class="SexCss"> <td>age：</td> <td><input type="text" /></td> </tr> </table>
Step 2: Use Jquery to obtain the TR element according to the class and control it to hide or display. The code is as follows:
var $rowsName = $("#MyList").find(".NameCSS");
var $rowsSex = $("#MyList").find(".SexCss");
switch (selectedValue)
{
case "Name":
$();
$();
break;
case "Sex":
$();
$();
break;
} Step 3: Run, there is no problem at all, this problem is solved!
4. The application scenario of implementing association according to the third solution
We can now control the display and hiding of TR in TABLE. We can think that the data part output to the browser after binding data is also displayed in the form of TR. So can we control the display and hiding of GridView content? Of course no problem.
Step 1: How to add class attributes to GridView data rows? We can use the line style of GridView (<RowStyle CssClass="test" />) to set it, the code is as follows:
<asp:GridView ID="GridView1" runat="server"> <RowStyle CssClass="test" /> </asp:GridView>
At this time, we run the page and view the source code output on the page, we will see that all TRs in the GridView data part are assigned a class="test" attribute!
Step 2: Bind the data, the code is as follows:
if (!IsPostBack)
{
List<Student> sList = new List<Student>()
{
new Student(){ SID = "s001", SName="Zhang San", SSex="male"},
new Student(){ SID = "s002", SName="Li Si", SSex="female"},
new Student(){ SID = "s003", SName="Wang Wu", SSex="male"}
};
= sList;
();
}
} Step 3: Add buttons to control the display or hide GridView data, the code is as follows:
<input type="button" value="hide" onclick="ShowDate()" />
Step 4: Implement the JS method that controls display and hides, the code is as follows:
function ShowDate() {
var val = $("#btn").val();
var $rows = $("#GridView1").find(".test");
switch (val) {
case "hide":
$();
$("#btn").val("Show"); break;
case "show":
$();
$("#btn").val("Hide"); break;
}
} Haha, the reasons, characters, inspiration, and the entire cause and effect of implementing this function are introduced. Programming not only requires realizing functions, but also integrating them into life.
The above four methods are closely connected and connected with each other. I hope everyone will savor and think carefully, and truly become their own things and apply them to their learning.