您的位置：首页 > Web前端 > JavaScript

jsp动态生成table

2014-07-22 17:22 429 查看

<script type="text/javascript">
function generate(){
var line = document.getElementById("line").value;//获取行数
var row = document.getElementById("row").value;//获取列数

var div = document.getElementById("tab");//获取到存放生成table的div
var table = document.createElement("TABLE");//创建table元素

for(var i=0;i<line;i++){//循环创建单元格，并填充内容
var tr = document.createElement("TR");
for(var j=0;j<row;j++){
var td = document.createElement("TD");
var tdText = document.createTextNode(row * i + j + 1);
td.appendChild(tdText);
tr.appendChild(td);
}
table.appendChild(tr);
}
table.setAttribute("border", "1");//设置表框属性
div.appendChild(table);//将创建的table附加到div中
}
</script>
<body>
行：<input type="text" name="line" id="line">
列：<input type="text" name="row" id="row">
<input type="button" value="生成表格" onclick="generate()">
<div id="tab">
</div>
</body>

页面结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM 解析html

相关文章推荐

新的分享

章节导航