如何在中間最好地展開HTML表格？

我使用中繼器動態創建HTML表格。我有四列，我填寫了一些公司數據，我想要做的是能夠點擊一行，並添加另一行谷歌地圖和一些更多的數據在另一箇中繼器。當我再次點擊該行時，我摺疊了額外的行，然後我可以點擊另一個客戶行。如何在中間最好地展開HTML表格？

我的第一個轉發器：

<asp:Repeater ID="rptSearchByNameResult" runat="server"> 
     <HeaderTemplate> 
     <table id="Result"> 
      <thead> 
       <tr> 
        <th></th> 
        <th>VAT No</th> 
        <th>Entity Name</th> 
        <th>Location</th> 
       </tr> 
      </thead> 
     </HeaderTemplate> 
     <ItemTemplate> 
      <tr> 
       <td class="expandResult" title="Click for more information">&#43;</td> 
       <td class="vat"><%# Eval("VAT.identifierValue")%></td> 
       <td class="vat"> 
        <%# Eval("Name.organisationName")%> 
        <%# Eval("Name.fullName")%> 
        <%# Eval("Name.tradingName")%> 
        <%# Eval("Name.primaryName")%> 
       </td> 
       <td class="location"> 
      <%# String.Format("{0} {1}", Eval("location.postCode"), Eval("location.stateCode")) %> 
       </td> 
      </tr> 
     </ItemTemplate> 
     <FooterTemplate> 
     </table> 
     </FooterTemplate 
</asp:Repeater>

之後我的谷歌地圖（我隱藏/顯示與expandResult類click事件）。

 </div> 
      <div id="map_canvas"/> 
     </div>

正如你可以看到我顯示在地圖的結果是不理想的底部時，列表非常長，所以我想告訴它（和其他中繼器）betweeen行。我應該怎麼做？我知道如何用jQery插入一個新行，但該表有四列，我希望額外的行只有兩列。然後，我必須破壞表格並插入一個div，並在其他數據之後立即啓動一個新表格嗎？完全跳過表格？爲了排序目的，我想保留表格。

關於在其他地方完成的任何示例？

在此先感謝。

來源

2011-04-21 Nick

如何使用colspan？ ..你可以結合使用colspan屬性在你的。像這樣的東西會爲你工作

<tr> 
<td colspan="4"><div>Your map goes and it will take the whole space </div></td> 
</tr>

來源

2011-04-21 12:55:15 neebz

太容易了，完全忘了colspan，謝謝 – Nick 2011-04-21 13:02:53

設置colspan你設置的新列的屬性。即總列數是每行4個。你只想要2此行所以每列將有一個colspan=2這樣的：

<td colspan="2">whatever</td><td colspan="2">whatever</td>

來源

2011-04-21 12:55:25

寬鬆的<table>結構，只是<div>元素的工作。

<ItemTemplate> 
      <div class="dataItemRow"> 
     <div class="vatItem expandResult" title="Click for more information"> 
      &#43;</div> 
     <div class="vatItem vat"> 
      <%# Eval("VAT.identifierValue")%></div> 
     <div class="vatItem vat"> 
      <%# Eval("Name.organisationName")%> 
      <%# Eval("Name.fullName")%> 
      <%# Eval("Name.divadingName")%> 
      <%# Eval("Name.primaryName")%> 
     </div> 
     <div class="vatItem location"> 
      <%# Sdiving.Format("{0} {1}", Eval("location.postCode"), Eval("location.stateCode")) %> 
     </div> 
     <div class="mapSpace hidden"> 
      <div>Your map goes and it will take the whole space</div> 
     </div> 
    </div> 
</ItemTemplate>

使用CSS的樣式應用到你想每一個元素，但要確保對「vatItem」和風格「隱藏」的風格看起來像：

.vatItem 
{ 
float:left; 
width:24%; //or a fixed number that insures that the four items create a 'row' no more or less.. 
} 
.hidden 
{ 
display:none; 
}

與在地方，你使用jquery/javascript爲expandResult類指定一個函數，使得所有mapSpace項目都被隱藏，然後在同一個div中定位一個mapSpace，並從中刪除隱藏的類。（讓它出現）

來源

2011-04-21 13:15:19

如何在中間最好地展開HTML表格？

回答

相關問題