如何把多个div放入一个table中

Question

得到数据库纪录，并以一个纪录对应一个div这样显示，现在的问题是我如何把这些div在一个table中显示呢？
[b]问题补充：[/b]
我这个是div是根据数据库的纪录循环出来的。也就是说我都多少条数据就有多少个div。现在的问题是我如何把这些div动态的在table中显示。
for(var i=0; i var id=itemNodes[i].getElementsByTagName("id");
var subject=itemNodes[i].getElementsByTagName("subject");
var startDate=itemNodes[i].getElementsByTagName("startDate");
var dueDate=itemNodes[i].getElementsByTagName("dueDate");
var status=itemNodes[i].getElementsByTagName("status");
var progress=itemNodes[i].getElementsByTagName("progress");
var type=itemNodes[i].getElementsByTagName("type");
var taskType=itemNodes[i].getElementsByTagName("taskType");
var project=itemNodes[i].getElementsByTagName("project");
var task=itemNodes[i].getElementsByTagName("task");
var memo=itemNodes[i].getElementsByTagName("memo");
if(id.length> 0 && subject.length> 0 && startDate.length> 0 && dueDate.length>0 && status.length> 0 && progress.length>0 && type.length>0 && taskType.length>0 && project.length>0 && task.length>0 && memo.length>0){
var id1=id[0].firstChild.nodeValue;
var subject1=subject[0].firstChild.nodeValue;
var startDate1=startDate[0].firstChild.nodeValue;
var dueDate1=dueDate[0].firstChild.nodeValue;
var status1=status[0].firstChild.nodeValue;
var progress1=progress[0].firstChild.nodeValue;
var type1=type[0].firstChild.nodeValue;
var taskType1=taskType[0].firstChild.nodeValue;
var project1=project[0].firstChild.nodeValue;
var task1=task[0].firstChild.nodeValue;
var memo1=memo[0].firstChild.nodeValue;
//div的值
ListDivValue=subject1;
//时间计算
var start=(startDate1).split(" ");
var start1=start[0].split("-");
var start2=start[1].split(":");
var formDate=new Date(start1[0],start1[1],start1[2],start2[0],start2[1],start2[2]);
//alert(formDate);
var end=(dueDate1).split(" ");
var end1=end[0].split("-");
var end2=end[1].split(":");
var thruDate=new Date(end1[0],end1[1],end1[2],end2[0],end2[1],end2[2]);
//alert(thruDate);
var middleDate=(((thruDate-formDate)/1000)/60)/30;
// alert(middleDate);
//listDiv的高度
var tdHeight=(document.getElementById('stable').offsetHeight)/(document.getElementById('stable').rows.length);
divHeight=tdHeight*middleDate;//div的高度
// alert(divHeight);
//获取服务器的时间

                  //这里是定位div放入表格的地方
                   var topDate=(document.getElementById('stable').rows[0].cells[0].innerText).split(":");//定点的时间。00：00
                   var date3=new Date(0,0,0,topDate[0],topDate[1],0);
                   var date2=new Date(0,0,0,start2[0],start2[1],0);
                   //alert(date2);
                   //alert(date3);
                   var middleH=(((date2-date3)/1000)/60)/30;//这里计算有多少个办小时
                   listDivTop=tdHeight*middleH;//div的高度

                   alert(listDivTop);
                  showListDiv();

function showListDiv(){
document.getElementById('listDiv').style.height=divHeight;
document.getElementById('listDiv').style.width='750px';
document.getElementById('listDiv').style.background='#94A2BE';
document.getElementById('listDiv').style.position='absolute';
document.getElementById('listDiv').style.top=listDivTop;
document.getElementById('listDiv').style.left='68px';
document.getElementById('listDiv').innerText=ListDivValue;
//document.getElementById('listDiv').innerText="

dd

";
}

00:00
01:00

这些div的top和height是根据这个表的宽，高算出来的。
[b]问题补充：[/b]
我要做成google日历查不多的效果。所以div必须是要放到table中的。上面的代码就是获取数据库中的纪录。并调用用于显示div的那个方法。每一条纪录就调用一个div。现在我的问题就是在table显示上。但是现在我运行结果只能每次显示一个div。我要的效果是把所有的div都显示在table上。

Answer 1

按照我的理解,楼主要实现的功能是:当点击table中的某一个单元格时,显示一个Div.这个div中有一些详细的操作,或者说相关资源查看.不知道理解得对不对.
下面是按我的理解所写的回答:

楼主应该注意.div并不是放在了table的里面.它只是通过了设置其style属性.使得它所处的位置是在表格的里面.

如要让div显示在固定的位置.则使用.
[code="java"]//使用绝对定位.
div.style.position="absolute";
//指定div所处的坐标和大小.
div.style.top="100";
div.style.left="100";
div.style.width="200";
div.style.height="200";
/***也可以通过css或html标签的style属性进行设置.这里就不写了.***/
[/code]

点击表格单元格,让div显示的时候.应该在每次当鼠标点击表格单元格的时候.根据所点击的单元格.生成相应的DIV标签.而不是一次性的生成所有的div.

写一个小例子吧.不知道能不能和楼主的代码扯上关系:
[code="html"]

//模拟数据库出提取出来的数据 var data=[["01023","张三"],["01024","李四"],["01025","王五"],["01026","周六"], ["01027","赵七"]]; //初始化表格 function initDataView(){ var grid=document.getElementById("dataView"); for(var i=0;i<data.length;i++){ //添加一行 var row=grid.insertRow(); for(var j=0;j<data[i].length;j++){ var cell=document.createElement("TD"); cell.innerHTML=data[i][j]; cell.style.cssText="width:200;border:1px solid #aaaaaa;"; row.appendChild(cell); } //将行添加到tBody中去 grid.firstChild.appendChild(row); } } //显示某行数据详细信息 function showDetails(){ var order=event.srcElement||event.target; //如果是移到的某一个单元格上.则显示Div if(order.tagName=="TD"){ var details=document.getElementById("details"); //通过该单元格的行下标,找到data中对应的数据. details.innerHTML=data[order.parentNode.rowIndex][1]+"的详细信息:"; details.style.top=order.offsetTop+document.getElementById("dataView").offsetTop; details.style.left=document.getElementById("dataView").offsetWidth+document.getElementById("dataView").offsetLeft; details.style.display="block"; } }

插入数据!

[/code]