js动态生成指定行数的表格_javascript技巧



下面用js实现可以生成用户所需行数的表格。
1.首先在body中填入下列代码，获取用户填入的行数值
代码如下:

动态生成表格

行

效果如下图所示：

2.header中添加js代码
代码如下:

function table() {
if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) {
document.getElementById("errmsg1").style.display = "block";//判断Num是否为空或不是数字 提示错误
document.getElementById("errmsg1").innerHTML = "提示信息：行数为空或不是数字！";
}
else {
document.getElementById("errmsg1").style.display = "none";//隐藏提示信息
var Num = parseInt(document.getElementById("Num").value); //获取行数
var flag = true;
var data = "";
data += " ";
data += " " +
"" +
"" +
"" +
"" ;
for (var i = 1; i <= Num; i++) {
data += "";
data += "";
data += "";
data += "";
data += "";
}
data += "

we are	zhuzhu	dudu
" + i + "

";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}


生成效果如下：

3.所有代码如下
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>












function table() {
if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) {
document.getElementById("errmsg1").style.display = "block";//判断payNum是否为空或不是数字 提示错误
document.getElementById("errmsg1").innerHTML = "提示信息：行数为空或不是数字！";
}
else {
document.getElementById("errmsg1").style.display = "none";//隐藏提示信息
var Num = parseInt(document.getElementById("Num").value); //获取分期数
var flag = true;
var data = "";
data += " ";
data += " " +
"" +
"" +
"" +
"" ;
for (var i = 1; i <= Num; i++) {
data += "";
data += "";
data += "";
data += "";
data += "";
}
data += "

we are	zhuzhu	dudu
" + i + "

";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}

动态生成表格

行