2、给表格高度设置一个初始值。
3、根据表格中的内容动态调整表格高度。
4、计算出需要添加的空白行数。
5、按照表格行高添加空白行。
6、重新设置表格高度。
7、更新页面显示效果。
首先定义一个闭包,如下:var appendText = function(){
//变量作用域为函数内部,外部无法访问
var html = ""
return {
getHtml : function(tmpNum){
html += "<input type='text' name='txt"+tmpNum+"'>"
return html
}
}
}()
然后修改你的代码
oTD.innerHTML = appendText.getHtml(tmpNum)
或者有兴趣的话可以学习一下Jquery,里面有相应方法很轻松地实现你的需求。
一、动态加载表格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>中