当前位置：首页 → 问答吧 → 动态创建table跨浏览器的问题。

动态创建table跨浏览器的问题。

时间：2010-08-24

来源：互联网

代码如下：

<html>
<head>
<script type="text/javascript">
var calendar_week = new Array(str_sun,str_mon,str_tue,str_wed,str_thu,str_fri,str_sat);

function OnGenSchedule(bg_div, title,first)
{
var title_div = 0;
var tick_div = 0;
var schedule_div = 0;
var strInnerHTML = "";
var strSubInnerHTML = "";

//创建标题
title_div = document.createElement("div");
title_div.style.cssText = "left:0px;top:0px;border:solid 1px;height:15px;width:63px;position:absolute;text-align:center";
title_div.innerHTML = title;
strInnerHTML += title_div.outerHTML;
if(g_schuduleHTML == "")
{
//创建刻度
tick_div = document.createElement("div");
tick_div.style.cssText = "left:65px;top:0px;width:672px;height:16px;position:absolute";
var tick_cell_div = document.createElement("div");
strSubInnerHTML = "";
for(var i = 0; i < 672; i += 112)
{
tick_cell_div.style.cssText = "width:112px;height:16px;top:0px;position:absolute;z-index:2;border-right:solid 1px;border-top:solid 1px;text-align:left;";
tick_cell_div.style.left = i + "px";
tick_cell_div.innerText = " " + AlignTime(i / 28) + ":00";
strSubInnerHTML += tick_cell_div.outerHTML;
}
tick_div.innerHTML = strSubInnerHTML;
g_schuduleHTML += tick_div.outerHTML;

//创建排程设置区域
schedule_div = document.createElement("div");
schedule_div.style.cssText = "left:64px;top:16px;width:672px;height:20px;position:absolute;border:solid 1px";
var schedule_item_div = 0;
schedule_item_div = document.createElement("div");
schedule_item_div.style.cssText = "width:7px;height:20px;top:0px;position:absolute;background-color:#e0e0e0;z-index:1";
schedule_item_div.onmouseover = "OnDragging(this)";
schedule_item_div.onmousedown = "OnStartSchedule(this)";
strSubInnerHTML = "";
for(var i = 0; i < 672; i += 7)
{
schedule_item_div.style.left = i + "px";
strSubInnerHTML += schedule_item_div.outerHTML;
}
schedule_div.innerHTML = strSubInnerHTML;
g_schuduleHTML += schedule_div.outerHTML;
}

//创建时间选择提示框
var time_tip_div = document.createElement("div");
time_tip_div.style.cssText = "left:0px;top:16px;border:solid 1px;height:20px;width:63px;position:absolute;text-align:center;background-color:#CCBBFF;display:none;";
time_tip_div.innerHTML = "";
strInnerHTML += time_tip_div.outerHTML;

strInnerHTML += g_schuduleHTML;
bg_div.innerHTML = strInnerHTML;

}
</script>
</head>

<body>
<div>
<div class = "tip_div">
<div class = "tip_img"></div>
<span id = "sch_errortips" class = "tip_span"></span>
</div>
<div class = "dash_line"></div>
<div class = "save_bar">
<input id = "default_btn" type = "button" value = "Default" class = "cfg_save_btn" onclick="LoadDefaultCfgSchedule()"/>
<input id = "save_btn" type = "button" value = "Save" class = "cfg_save_btn" onclick = "OnSaveConfig();" />
</div>
<ul class = "list_ul">
<div id = "sch_schdule_label" class = "head_div">Schedule</div>
<li>
<table border = "1" class = "main_table" style ="width:750px; height:400px;">
<tr>
<td style ="width:550px;">
<select name = "channelIndex" id = "schChannelIndex" style ="width:540px;" onchange = "OnchangeChannel(this)">
</select>
</td>
<td align = "center">
<img id = "img_sch_draw" src = "res/draw2.png" alt = "" onclick = "OnSetDrawMode(false)" />
<img id = "img_sch_erase" src = "res/erase1.png" alt = "" onclick = "OnSetDrawMode(true)" />
</td>
</tr>
<tr>
<td id = "sch_label" colspan="3" style="border-bottom:solid 1px black; font-weight:bold;text-align:center;">week schedule</td>
</tr>
<tr style="height:30px; padding:0;">
<td colspan="3" style="border:none;">
<div id="schedule_time_tip" style="border:solid 1px;height:20px;line-height:20px;width:150px;text-align:center;background-color:#CCBBFF;display:none;"></div>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom:solid 1px black; margin:0; padding:0;">
<table>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div0" style ="height:40px;position:absolute;"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div1" style ="height:40px;position:absolute"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div2" style ="height:40px;position:absolute"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div3" style ="height:40px;position:absolute"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div4" style ="height:40px;position:absolute"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div5" style ="height:40px;position:absolute"></div></td>
</tr>
<tr style="height:40px; vertical-align:middle">
<td><div id = "schedule_div6" style ="height:40px;position:absolute"></div></td>
</tr>
</table>
</td>
</tr>
</table>

<script type="text/javascript">

OnGenSchedule(schedule_div0, calendar_week[0]);
OnGenSchedule(schedule_div1, calendar_week[1]);
OnGenSchedule(schedule_div2, calendar_week[2]);
OnGenSchedule(schedule_div3, calendar_week[3]);
OnGenSchedule(schedule_div4, calendar_week[4]);
OnGenSchedule(schedule_div5, calendar_week[5]);
OnGenSchedule(schedule_div6, calendar_week[6]);
</script>
</body>
</html>

OnGenSchedule用来创table里面的东西的。现在的问题是：
在safari上面显示的效果最后一个div （schedule_div6）上面的东西超出了table的bottom。如果table的高度设置了，这个问题可以解决，但是schedule_div0显示的效果：上边框离table的距离太大，很难看。不知道如何解决。
希望可以支持ie6，7，8和safari