<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口 </title><meta http-equiv="content-type" content="text/htmlcharset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小 </h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!-- 显示浏览器窗口的实际尺寸 -->
浏览器窗口 的 实际高度 : <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度 : <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0
var winHeight = 0
function findDimensions() // 函数：获取尺寸
{
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth
else if ((document.body) &&(document.body.clientWidth))
winWidth = document.body.clientWidth
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight
else if ((document.body) &&(document.body.clientHeight))
winHeight = document.body.clientHeight
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement &&document.documentElement.clientHeight &&document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight
winWidth = document.documentElement.clientWidth
}
// 结果输出至两个文本框
document.form1.availHeight.value= winHeight
document.form1.availWidth.value= winWidth
if(winWidth <1000){
document.getElementById("table_m").width="1000"
}else{
document.getElementById("table_m").width = "100%"
}
}
findDimensions()
// 调用函数，获取数值
window.onresize=findDimensions
//-->
</script>
<table id="table_m" width="100%"><tr><td width="206" height="200">固定 <img src="" width="10" /></td><td width="100%" align="center"><table border="0" cellspacing="0" vspace="0" width="95%"><tr><td align="center" height="190" bgcolor="#999999">可变</td></tr></table></td><td width="206">固定<img src="" width="10" /></td></tr></table>
</body>
</html>
一、动态加载表格1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2.在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
复制代码 代码如下:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
复制代码 代码如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
复制代码 代码如下:
<script type="text/javascript" src="test.js"></script>
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
复制代码 代码如下:
<table>
<thead></thead>
<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr")//创建行
td1=document.createElement("tr")//创建单元格
td1.appendChild(document.createTextNode("content"))//为单元格添加内容
row.appendChild(td1)//将单元格添加到行内
document.getElementById("rows").append(row)//将行添加到<tbody>中
window.outerheight窗口总高度
和window.screen.availheight一样
window.innerheight
窗口可视区域高度
window.screen.height
显示器屏幕高度
另外：jquery获取高度
$(".thiscrumbs").height()
元素本身高度
$(".thiscrumbs").innerheight()
元素高度+内边距
$(".thiscrumbs").outerheight()
元素高度+内边距+边框
$(".thiscrumbs").outerheight(true)
元素高度+内边距+边框+外边距
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）