如何复制div多次固定的次数

时间:2012-07-02 06:37:54

标签: javascript asp.net css

我想多次复制整个div(即A4纸张尺寸Upperleftcorner,UpperRight Corner,左下角,右下角)

    <script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element;

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>


  <div class = "layout">
 <div class="header"><asp:label id="label1" runat="server/></div>
   <div class="chart"><asp:label id="label2" runat="server/></div>
    <div class="legend"><asp:label id="label3" runat="server/></div>
     <div class="info1"><asp:label id="label4" runat="server/></div>
      <div class="info2"><asp:label id="label5" runat="server/></div>
      <div class="info3"><asp:label id="label6" runat="server/></div>............
  </div>

  ![enter image description here][1]
  the screen shot is attached below

1 个答案:

答案 0 :(得分:0)

你不能用javascript做,因为你有asp.net控件。   为每个div添加runat="server"并更改其ID to Upperleftcorner, Upperrightcornerbottom, bottomleftcorner, bottomrightcorner.

代码:

          List<HtmlGenericControl> alldivs=new List<HtmlGenericControl>(4);
            alldivs.Add(Upperleftcorner);
            alldivs.Add(Upperrightcornerbottom);
            alldivs.Add(bottomleftcorner);
            alldivs.Add(bottomrightcorner); 
            foreach(HtmlGenericControl divparent in alldivs)
            {
            HtmlGenericControl divholder= new HtmlGenericControl("div");
            divholder.Attributes.Add("class", "layout");
            for(int i=1;i<=6;i++)
            {
            HtmlGenericControl div= new HtmlGenericControl("div");
            if(i==1)
            div.Attributes.Add("class", "header");
            if(i==2)
            div.Attributes.Add("class", "chart");
            if(i==3)
            div.Attributes.Add("class", "legend");
            if(i==4)
            div.Attributes.Add("class", "info1");
            if(i==5)
            div.Attributes.Add("class", "info2");
            if(i==6)
            div.Attributes.Add("class", "info3");
            Label l=new Label();
            div.Controls.Add(l);
            divholder.Controls.Add(div);
            }
            divparent.Controls.Add(divholder);
            }

使用javascript,您必须使用<span>

<script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element='<div class = "layout"><div class="header"><span  class="label1" /></div><div class="chart"><span  class="label2" /></div><div class="legend"><span  class="label3" /></div><div class="info1"><span  class="label4" r/></div><div class="info2"><span  class="label5" /></div><div class="info3"><span class="label6" /></div></div>';

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>