DIV CSS 佈局教程網

今天做靜態頁面時有一個需求，就是頁面上有一組兩個選項的單選按鈕和一個有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的行樣式（<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(); 
  } 
 } 

第三步：加入控制顯示或隱藏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; 
   } 
  } 

呵呵，實現這個功能的原因、人物、靈感、整個前因後果就介紹完啦，編程嘛不僅是要實現功能，更要融於生活。

以上四個方法都是緊密相連，互相有聯系的，希望大家細細品味，仔細琢磨，真正成為自己的東西，運用到學習中。