准备做一个签名墙,效果如下:http://comment.news.sohu.com/comment/wall.jsp?page=1
与它的一样,是从数据库里读出数据,行有错位[奇数行显示5个单元格,偶数行显示6个单元格(最左边与最右边单元格各半个单元格宽),以达到移位效果]与它不同的是,我的不分页面,所以表格要动态生成.现在的问题是:
1 由于数据会不断增加,则表格不能静态编辑好,必须动态生成,用HtmlTable还是Table好;
2 怎样达到上述的错位效果;
3 单元格背景图片(也可以直接插图片,上面再放数据)怎么动态加入,注意:偶数行的最左边与最右边单元格背景是由普通单元平分得到的.
4 单元格中的文字准备用SqlDataReader读出,然后写入到单元格中,如果是这种动态表格,可不可以用tablecell.innertext=dr["列名"]
5 如果加入了,怎么将后加入的数据放到最上面,而且是有数据的时候才显示背景图片,以及从右边往左边添砖.
6 如果页面很高很高,怎么用查询定位到该签名的地方. 原来用datalist,但是不能达到效果.
还请各大虾指点,分数不多,还望见谅

解决方案 »

  1.   

    我觉得可以每次先从库中读取数据
    算出一共要多少行最开始有一个一行一列的表格做容器
    例如:
    <table>
    <tr>
    <td id="ground" runat="sever"></td>
    </tr>
    </table>然后根据所算出的数据
    定表格大小
    利用ground.InnerHtml="<table>.....</table>":
    将表格嵌入你第2问所说的,应该就是用表格来实现吧,在偶数行加一个半长的单元格。
    此外,在嵌入表格时你还可以一起把背景色之类的东西统统写进去了
    总之你要的东西全应在这张你根据库中信息所计算得到的表中
      

  2.   

    谢谢pangmao,您已获得10分,:).这是一种好的思路,但是能不能给出更详细一点的代码呢(ground.InnerHtml="<table>.....</table>"中的table之间的代码).我的背景是以单元格为单位的.
      

  3.   

    我来得点分 :)
    先给出代码,再分点说明:
    private void Page_Load(object sender, System.EventArgs e)
    {
      SqlConnection myconn=new SqlConnection("server=localhost;database=zijing;uid=sa;pwd=sa");
      myconn.Open();
      SqlCommand cm=new SqlCommand("Select count(*) from Sign",myconn);
      int signCount=(int)cm.ExecuteScalar();
      int rowsCount=(signCount-1)/9+1;
      cm.CommandText="Select signContent from Sign order by ID desc";
      SqlDataReader dr=cm.ExecuteReader();
      HtmlTable tb=new HtmlTable();

      for(int i=1;i<=signCount;i++)
      {
          while(dr.Read())
         {

            HtmlTableCell td=new HtmlTableCell();//1 用htmltable
            td.InnerText=dr["signContent"].ToString();//4 单元格读取数据
            td.Attributes.Add("background","zhuan.gif");//3 单元格背景图片加入-判断i加入不同背景图即可
            HtmlTableRow tr=new HtmlTableRow();
            tr.Cells.Add(td);
            tb.Rows.Add(tr);
         }
       }
       Page.Controls[1].Controls.Add(tb);
    }只需判断i,即可选择何时换行,何时加入半块砖背景,何时加入正快转背景,何时加入数据,稍微做修改既可以.
      

  4.   

    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;namespace dtable
    {
    /// <summary>
    /// WebForm1 的摘要说明。
    /// </summary>
    public class WebForm1 : System.Web.UI.Page
    {
    private void Page_Load(object sender, System.EventArgs e)
    {

    //取出数据
    SqlConnection myconn=new SqlConnection("server=localhost;database=zijing;uid=sa;pwd=sa");
    myconn.Open();
    SqlCommand cm=new SqlCommand("Select count(*) from Sign",myconn);
    int signCount=(int)cm.ExecuteScalar();//记录签名记录数
    int m=(signCount)%9;//用以判断加入什么行什么单元格
    byte k=1;//k=1表示共有奇数行,k=2表示共有偶数行,用以判断第一行的格式
    int i=0;//用以记录当前已取出多少记录,signCount-i就是还剩下多少记录
    int rowsCount=(signCount-1)/9;//重复单元格对的的数目
    Response.Write("共有"+signCount.ToString()+" 条记录数");
    cm.CommandText="Select signContent from Sign order by ID desc";
    SqlDataReader dr=cm.ExecuteReader(); //定义表格基本元素-表格,行,单元格
    HtmlTable tb=new HtmlTable();
    tb.Width="930";
    tb.Border=0;
    tb.CellPadding=0;
    tb.CellSpacing=0;
    tb.Align="Center";
    tb.Attributes.Add("frame","void");
    tb.Attributes.Add("cols","10");
    HtmlTableRow tr1=new HtmlTableRow();
    tr1.Height="60";
    tr1.Align="Center";
    tr1.VAlign="Middle";

    //处理第一行
    if(signCount==0)
    {
    }
    else 
    {
    //共有奇数行的处理--此时第一行为5个数据格
    if(m>0&&m<6)
    {
    k=1;
    for(int j=0;j<5-m;j++)
    {
    HtmlTableCell td2=new HtmlTableCell();
    td2.ColSpan=2;
    td2.Width="186";
    tr1.Cells.Add(td2);
    }
    while(i<m)
    {
    if(dr.Read())
    {
    HtmlTableCell td3=new HtmlTableCell();
    td3.ColSpan=2;
    td3.Width="186";
    td3.Attributes.Add("background","zhuan.jpg");
    td3.InnerText=dr[0].ToString();
    tr1.Cells.Add(td3);
    }
    i++;
    }
    }
    //共有偶数行--此时第一行为4个数据格,加左右各一个空白半格
    else
    {
    k=2;
    HtmlTableCell td1=new HtmlTableCell();
    td1.Width="93";
    tr1.Cells.Add(td1);
    if(m==0)
    {
    while(i<4)
    {
    if(dr.Read())
    {
    HtmlTableCell td3=new HtmlTableCell(); ;
    td3.ColSpan=2;
    td3.Width="186";
    td3.Attributes.Add("background","zhuan.jpg");
    td3.InnerText=dr[0].ToString();
    tr1.Cells.Add(td3);
    }
    i++;
    }
    }
    else 
    {
    for(int j=0;j<9-m;j++)
    {
    HtmlTableCell td2=new HtmlTableCell();
    td2.ColSpan=2;
    td2.Width="186";
    tr1.Cells.Add(td2);
    }
    while(i<m-5)
    {
    if(dr.Read())
    {
    HtmlTableCell td3=new HtmlTableCell();
    td3.ColSpan=2;
    td3.Width="186";
    td3.Attributes.Add("background","zhuan.jpg");
    td3.InnerText=dr[0].ToString();
    tr1.Cells.Add(td3);
    }
    i++;
    }
    }
    HtmlTableCell td4=new HtmlTableCell();
    td4.Width="93";
    td4.Attributes.Add("background","right_zhuan.jpg");
    tr1.Cells.Add(td4);
    }

        tb.Rows.Add(tr1); //第二行处理-共有偶数行时在下面先增加一行5格数据的行,以便剩下来的都是完整的两行的重复
    if(k==2)
    {
    HtmlTableRow tr2=new HtmlTableRow();
    tr2.Height="60";
    tr2.Align="Center";
    tr2.VAlign="Middle";
    for(int u=0;u<5;u++)
    {
    if(dr.Read())
    {
    HtmlTableCell td5=new HtmlTableCell();
    td5.ColSpan=2;
    td5.Width="186";
    td5.Attributes.Add("background","zhuan.jpg");
    td5.InnerText=dr[0].ToString();
    tr2.Cells.Add(td5);
    }
    i++;
    }
    tb.Rows.Add(tr2);
    } //剩下行的处理
    for(int j=0;j<rowsCount;j++)
    {
    //增加一行--4格数据格2格空白半格的
    HtmlTableRow tr3=new HtmlTableRow();
    tr3.Height="60";
    tr3.Align="Center";
    tr3.VAlign="Middle";
    HtmlTableCell td6=new HtmlTableCell();
    td6.Width="93";
    td6.Attributes.Add("background","left_zhuan.jpg");
    tr3.Cells.Add(td6);
    for(int u=0;u<4;u++)
    {
    if(dr.Read())
    {
    HtmlTableCell td7=new HtmlTableCell();
    td7.ColSpan=2;
    td7.Width="186";
    td7.Attributes.Add("background","zhuan.jpg");
    td7.InnerText=dr[0].ToString();
    tr3.Cells.Add(td7);
    }
    i++;
    }
    HtmlTableCell td8=new HtmlTableCell();
    td8.Width="93";
    td8.Attributes.Add("background","right_zhuan.jpg");
    tr3.Cells.Add(td8);
    tb.Rows.Add(tr3); //增加一行--5格数据格
    HtmlTableRow tr4=new HtmlTableRow();
    tr4.Height="60";
    tr4.Align="Center";
    tr4.VAlign="Middle";
    for(int v=0;v<5;v++)
    {
    if(dr.Read())
    {
    HtmlTableCell td9=new HtmlTableCell();
    td9.ColSpan=2;
    td9.Width="186";
    td9.Attributes.Add("background","zhuan.jpg");
    td9.InnerText=dr[0].ToString();
    tr4.Cells.Add(td9);
    }
    i++;
    }
    tb.Rows.Add(tr4);
    }
     }
     Page.Controls[1].Controls.Add(tb);
    dr.Close();

    } #region Web 窗体设计器生成的代码
    override protected void OnInit(EventArgs e)
    {
    //
    // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
    //
    InitializeComponent();
    base.OnInit(e);
    }

    /// <summary>
    /// 设计器支持所需的方法 - 不要使用代码编辑器修改
    /// 此方法的内容。
    /// </summary>
    private void InitializeComponent()
    {    
    this.Load += new System.EventHandler(this.Page_Load);
    }
    #endregion
    }
    }
      

  5.   

    谢谢pangmao,digitalchina,尤其是digitalchina,给出了完整的代码 ,csdn上还是牛人多,揭帖,给分.再次谢谢!