动态生成html

我想在cs文件中动态生成所需要的html，这个html里有好几个table表
然后在页面上点击某个标签对应的显示某个table表（比如点击标签a，显示table1，点击标签b，显示table2，同时table1隐藏）
请问这个功能该怎么，谁能给我具体说说，最好有代码的。谢谢各位大侠

解决方案 »

  1.   

    机器有点卡,等下给你写个DEMO
      

  2.   

    把table放在div标签中，通过js设置div的style属性的display为block（显示）/none（不显示）
      

  3.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="htmlTable.aspx.cs" Inherits="htmlTable" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
        function show(id)
        {
            
            var els= document.documentElement.getElementsByTagName('table');
            for(var i=0; i<els.length; i++) 
            {
                
                if(els[i].id.substr(2,1)==id)
                {
                    
                    els[i].style.display='';
                }
                else
                {
                    els[i].style.display='none';
                }
            }    }
        
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <%= getTable() %>
        </div>
            <input id="Button1" type="button" value="TB1显示"  onclick="show(1)"/>
            <input id="Button2" type="button" value="TB2显示" onclick="show(2)" />
            <input id="Button3" type="button" value="TB3显示" onclick="show(3)"/>
            <input id="Button4" type="button" value="隐藏" onclick="show(0)"/>
        </form>
    </body>
    </html>
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;public partial class htmlTable : System.Web.UI.Page
    {
        protected string getTable()
        { 
            string table= "<table id='tb1'  style='display:none' ><tr><td>tb1.1.A</td>";
            table+="<td>tb1.1.B</td><td >tb1.1.C</td></tr><tr><td>tb1.2.A</td>";
            table+="<td>tb1.2.B</td><td >tb1.2.C</td></tr><tr><td>tb1.3.A</td><td>tb1.3.B</td>";
            table+="<td >tb1.3.C</td></tr></table>";
            table+= "<table id='tb2'  style='display:none' ><tr><td>tb2.1.A</td>";
            table+="<td>tb2.1.B</td><td >tb2.1.C</td></tr><tr><td>tb2.2.A</td>";
            table+="<td>tb2.2.B</td><td >tb2.2.C</td></tr><tr><td>tb2.3.A</td><td>tb2.3.B</td>";
            table+="<td >tb2.3.C</td></tr></table>";
            table += "<table id='tb3'  style='display:none' ><tr><td>tb3.1.A</td>";
            table += "<td>tb3.1.B</td><td >tb3.1.C</td></tr><tr><td>tb3.2.A</td>";
            table += "<td>tb3.2.B</td><td >tb3.2.C</td></tr><tr><td>tb3.3.A</td><td>tb3.3.B</td>";
            table += "<td >tb3.3.C</td></tr></table>";
            return table;
        }    protected void Page_Load(object sender, EventArgs e)
        {    }
    }
      

  4.   

    初学JS，可以作个参考
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    function showtable(tag){
    switch (tag){
    case 'div1':
    document.getElementById('div2').style.display='none';
    document.getElementById('div1').style.display='block';
    break;
    case 'div2':
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='block';
    break;
    }
    }
    </script>
    </head><body>
    <input type="button" id="btn1" onclick='showtable("div1")' value="show table1" />
    <div id="div3" onclick='showtable("div2")' style="cursor:hand">show table2</div>
    <div id="div1"><table id="table1" border="1"><tr><td colspan="2">table1</td></tr><tr><td>1111111</td><td>2222222</td></tr></table></div>
    <div id="div2"><table id="table2" border="1"><tr><td colspan="2">table2</td></tr><tr><td>1111111</td><td>2222222</td></tr></table></div>
    </body>
    </html>