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

悬赏:10 发布时间:2008-07-09 提问人:benniao (初级程序员)

得到数据库纪录,并以一个纪录对应一个div这样显示,现在的问题是我如何把这些div在一个table中显示呢?
问题补充:
我这个是div是根据数据库的纪录循环出来的。也就是说我都多少条数据就有多少个div。现在的问题是我如何把这些div动态的在table中显示。
for(var i=0; i<itemNodes.length; 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="<div id='tab'>dd</div><div id='zhansan'><div>";
}

<table id="stable" class="divTable" style="width:800;" onclick="showCreateDiv()">
<div id="listDiv"></div>
<tr>
<th rowspan="2">00:00</th>
<td></td>
</tr>
<tr>
<td></td>
</tr>

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

采纳的答案

2008-07-09 ham (资深程序员)

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

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

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


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

写一个小例子吧.不知道能不能和楼主的代码扯上关系:
<html>
<head>
<script>
//模拟数据库出提取出来的数据
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";
	}
}
</script>

</head>
<body>
<div id="details" style="position:absolute;border:1px solid;display:none;width:200;height:200;background-color:#f8f8f8;">
</div>
<table id="dataView" onmouseover="showDetails();">
<tbody>
</tbody>
</table>
<button onclick="initDataView();">插入数据!</button>
</body> 
</html>
<!--要在IE下运行-->

提问者对于答案的评价:
虽然不是我要的答案,但是你给我一些提示。谢了。。。

其他回答

如果要把Div放在Table中.每一个Div要对应一个表格的TD.

<table>
<tr>
<td><div>一个层</div></td>
<td><div>一个层</div></td>
</tr>
</table>


感觉没必要再搞个Div,直接用表格的TD不就行了吗?
ham (资深程序员) 2008-07-09
汗...看了半天,不知道楼主的代码是要实现什么功能.
能不能大概讲一下.

还有.为什么楼主一定要在table中用div不可呢?
ham (资深程序员) 2008-07-09
你要那么多的div有啥用啊 换点别的不行么
348105874 (初级程序员) 2008-07-09
建议全部用DIV来解决,也就是说用DIV实现TABLE。
以前看过一片文章说过,忘记具体原因了,和TABLE这个标签有关。
yhb_4323 (初级程序员) 2008-07-09