Question

我想一个接一个追加多个div。在我的场景中，我从SharePoint检索数据，并从中得到一些像这样的变量值变量： - StartTime，EndTime，MeetingTitle，RoomNo。

 $(xData.responseXML).find("z\\:row, row").each(function() {
     var StartTime = $(this).attr("ows_EventDate");
     var EndTime = $(this).attr("ows_EndDate");
     var MeetingTitle = $(this).attr("ows_Title");
     var BuildingName = $(this).attr("ows_BuildingName");
     var RoomNo = $(this).attr("ows_Facilities");
   }

在循环的每次迭代获得变量值之后，我想将这些变量值一个接一个地附加到div中。并创建页面正文。在div中我想在下面的位置分配值

span id - RoomNo - RoomNo（变量值）

span id - StartTime - StartTime（变量值）

span id - EndTime - EndTime（变量值）

td id = MeetingTitle - MeetingTitle（变量值）

Div如下所示，

  <div class="box"  style="float:left">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center"><span class="acqabold">Room No.</span><br />
              <span class="numberbold" id="RoomNo">01</span></td>
              <td align="right"><span class="smacqabold" id="Today">YYYY<br>
              DD Month </span><br> 
              <span class="bluebold" id="StartTime">08.00</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">10.00</span></td>
          </tr>
        </table>
      </td>
      <tr>
          <td align="center"  class="bluehead" id="MeetingTitle">
            XYZ Meeting.
          </td>
      </tr>
    </table>
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  .............
  .
  .

div的数量等于循环迭代。所以请建议我如何实现它。

非常感谢和问候， Digambar Kashid

Answer 1

如果你可以给容器盒一个Id（对于这个例子id =“container”）你可以使用jQuery：

$("#container").append("<div ...");

Answer 2

Add one parent Container id i named parentContainer in this below example

var boxLength = $( ".box" ).length();

for(var i=0;i<=boxLength;i++){

$("#parentContainer") . append ('<div class="box"  style="float:left">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td align="center"><span class="acqabold">Room No.</span><br />
                                    <span class="numberbold" id="RoomNo">' + RoomNo + '</span></td>
                                    <td align="right"><span class="smacqabold" id="Today">YYYY<br>
                                    DD Month </span><br> 
                                    <span class="bluebold" id="StartTime">' + StartTime + '</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">'+EndTime+'</span></td>
                                </tr>
                              </table></td>
                                   <tr>
                            <td align="center"  class="bluehead" id="MeetingTitle">
                             '+ MeetingTitle +'</td>
                          </tr>
                  </table>
                </div> ');

}

使用Jquery或Javascript动态附加Div

2 个答案: