今天做靜態頁面時有一個需求，就是頁面上有一組兩個選項的單選按鈕和一個有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";
第三步：運行程序，你會發現根本不管用，哈哈，有點被耍的感覺~！因為TR標籤只能與TABLE標籤搭配使用！好啦，雖然上面的程式碼不管用！但是還算起到了一個引導的作用吧，失敗是成功的老娘嘛！
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的行樣式（
<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();
}
} 第三步：加入控制顯示或隱藏GridView資料的按鈕,程式碼如下：
<input id="btn" type="button" value="隐藏" onclick="ShowDate()" />
第四步：實現控制顯示與隱藏的JS方法，程式碼如下：
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;
}
} 呵呵，實現這個功能的原因、人物、靈感、整個前因後果就介紹完啦，程式設計嘛不只是要實現功能，更要融於生活。
以上四個方法都是緊密相連，互相有連結的，希望大家細細品味，仔細琢磨，真正成為自己的東西，運用到學習中。
