今天做靜態頁面時有一個需求,就是頁面上有一組兩個選項的單選按鈕和一個有6行的列表(該列表用Table標籤實現,不是DIV),當選擇單選按鈕的選項一時,列表的前三條信息顯示後三條信息隱藏,當選擇單選按鈕的選項二時,列表的前三條信息隱藏後三條信息顯示。那麼就牽扯出我們今天的話題拉,如何實現呢?實現後該實現還能應用到哪些場景?
1、第一反應的解決方案
碰到這個需求後,我第一反應就是很簡單啊,分別用兩個DIV將前三個Table中的TR標籤與後三個TR標籤包起來,然後通過JS控制DIV的顯示。
第一步:使用DIV包裹需要隱藏顯示的TR。代碼如下:
- <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>
第二步:使用JS控制DIV的顯示,來達到控制隱藏或顯示行的效果:
- $("#divName").style.display = "none";
- $("#divSex").style.display = "block";
2、同事推薦的使用panel解決方案
這是在我描述了DIV與TR不能配合使用後,被同事笑話啦,哎、看來以後要多多學習學習HTML啦,笑話完我後,同事董寧告訴我用PANEL控件包住TR,用Visible屬性在服務器級別控制TR的輸出。
第一步:使用PANEL控件包住用來顯示或隱藏的TR標籤,代碼如下:
- <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>
第二步:在服務器端使用Panel控件的Visible屬性控制行的輸出,代碼如下:
- 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、同事“歪歪”大俠的無厘頭解決方案
那麼,我們來看看歪歪的思路,首先給每個TR標籤賦予一個class樣式,但是這個樣式是沒有實現的,僅僅做獲取該TR的標識。
第一步:給TR標籤添加一個沒有實現的class樣式。代碼如下:
- <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>
第二步:使用Jquery根據class獲取TR元素,並且控制其隱藏或顯示,代碼如下:
- 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;
- }
4、根據歪歪大俠的實現聯想的應用場景
我們現在可以控制TABLE中TR的顯示與隱藏後,我們可以想到ASP.NET GridView控件在綁定數據後輸出到瀏覽器後的數據部分,也是用TR的形式來顯示的,那麼我們可不可以控制GridView內容的顯示與隱藏呢?當然沒問題了。
第一步:如何給GridView數據行加入class屬性呢?我們可以用GridView的行樣式(<RowStyle CssClass="test" />)來設置,代碼如下:
- <asp:GridView ID="GridView1" runat="server">
- <RowStyle CssClass="test" />
- </asp:GridView>
此時我們運行頁面,查看頁面輸出的源代碼會看到GridView數據部分的所有TR都被賦予了一個class="test"屬性!
第二步:綁定數據,代碼如下:
- 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();
- }
- }
- <input id="btn" type="button" value="隱藏" onclick="ShowDate()" />
- 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;
- }
- }
點擊推薦、也是一種體驗生活噢~!