下面用js实现可以生成用户所需行数的表格，具体步骤及效果图如下，感兴趣的朋友，可以参考下哈，希望对大家有所帮助
下面用js实现可以生成用户所需行数的表格。
1.首先在body中填入下列代码，获取用户填入的行数值
复制代码 代码如下:
<table>
<tr>
<td>动态生成表格</td>
<td><input type="text" size="10"/>行</td>
</tr>
</table>
</br>
<input type="button" value="生成"/></br>
</br>
<div mce_style="display: none">
<div></div>
</div>
<div></div>
效果如下图所示：
2.header中添加js代码
复制代码 代码如下:
<script>
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 += " <table >";
data += " <tr>" +
"<td >we are</td>" +
"<td >zhuzhu</td>" +
"<td >dudu</td>" +
"</tr>" ;
for (var i = 1; i <= Num; i++) {
data += "<tr >";
data += "<td>" + i + "</td>";
data += "<td><input type='text'></td>";
data += "<td><input type='text'></td>";
data += "</tr>";
}
data += "</table>";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}
</script>
生成效果如下：
3.所有代码如下
复制代码 代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="https://www.jb51.net/<%=basePath%>">
<title>test</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.right{
margin:0% 10%;
width:600px;
}
.right table{
background:white;
width:100%;
border:1px solid #499B33;
}
.right td{
background:blue;
text-align:center;
padding:2px;
border:1px solid #499B33;
}
.right td{
background:#8FBC8F;
}
.item{
text-align:center;
width:100px;
}
.assigned{
border:1px solid #BC2A4D;
}
</style>
<script>
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 += " <table >";
data += " <tr>" +
"<td >we are</td>" +
"<td >zhuzhu</td>" +
"<td >dudu</td>" +
"</tr>" ;
for (var i = 1; i <= Num; i++) {
data += "<tr >";
data += "<td>" + i + "</td>";
data += "<td><input type='text'></td>";
data += "<td><input type='text'></td>";
data += "</tr>";
}
data += "</table>";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}
</script>
</head>
<body>
<br>
<div>
<div>
<table>
<tr>
<td>动态生成表格</td>
<td><input type="text" size="10"/>行</td>
</tr>
</table>
</br>
<input type="button" value="生成"/></br>
</br>
<div mce_style="display: none">
<div></div>
</div>
<div></div>
</div>
</div>
</body>
</html>
您可能感兴趣的文章: