JS dynamically generate the specified number of rows table _javascript tips

The following JS implementation can generate the number of rows required by the user table.
1. First in the body to fill in the following code, get the user filled in the row values

Copy Code code as follows:

<table>
<tr>
<td> dynamically generate Tables </td>
<td><input id= "Cold" type= "text" class= "input" size= "ten" name= "Num"/> Line </td>
</tr>
</table>
</br>
<input name= "" type= "button" value= "Generate" class= "Buttton" onclick= "table ()"/></br>
</br>
<div id= "Div1" style= "Display:none" mce_style= "Display:none" >
<div id= "table1" ></div>
</div>
<div id= "ERRMSG1" class= "formmsg" ></div>

The effect is shown in the following illustration:

Add JS code in 2.header

Copy Code code as follows:

<script>
function table () {
if (document.getElementById ("Num"). Value = = "" | | document.getElementById ("Num"). Value.search ("^[0-9]*$") = = 1) {
document.getElementById ("ERRMSG1"). Style.display = "block";//To determine whether num is empty or not a number prompt error
document.getElementById ("ERRMSG1"). InnerHTML = "Hint: The number of rows is either blank or not number!" ";
}
else {
document.getElementById ("ERRMSG1"). Style.display = "none";//Hide hint information
var Num = parseint (document.getElementById ("Num"). Value); Get number of rows
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 + + "&LT;TR >";
Data + + "<td>" + i + "</td>";
Data + + "<td><input name= ' Coldday" +i+ "' type= ' text ' class= ' input ' ></td>";
Data + + "<td><input name= ' Coldcuremethod" +i+ "' type= ' text ' class= ' input ' ></td>";
Data + + "</tr>";
}
Data + + "</table>";
document.getElementById ("Div1"). Style.display = "block";
document.getElementById ("table1"). InnerHTML = data;
}
}
</script>

The build effect is as follows:

3. All code is as follows

Copy Code code as follows:

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<base href= "<%=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 are 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";//To determine if Paynum is empty or not a number prompt error
document.getElementById ("ERRMSG1"). InnerHTML = "Hint: The number of rows is either blank or not number!" ";
}
else {
document.getElementById ("ERRMSG1"). Style.display = "none";//Hide hint information
var Num = parseint (document.getElementById ("Num"). Value); Get the number of installments
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 + + "&LT;TR >";
Data + + "<td>" + i + "</td>";
Data + + "<td><input name= ' Coldday" +i+ "' type= ' text ' class= ' input ' ></td>";
Data + + "<td><input name= ' Coldcuremethod" +i+ "' type= ' text ' class= ' input ' ></td>";
Data + + "</tr>";
}
Data + + "</table>";
document.getElementById ("Div1"). Style.display = "block";
document.getElementById ("table1"). InnerHTML = data;
}
}
</script>
<body>
<br>
<div style= "width:750px;" >
<div class= "Right" >
<table>
<tr>
<td> dynamically generate Tables </td>
<td><input id= "num" type= "text" class= "input" size= "ten" name= "num"/> Line </td>
</tr>
</table>
</br>
<input name= "" type= "button" value= "Generate" class= "Buttton" onclick= "table ()"/></br>
</br>
<div id= "Div1" style= "Display:none" mce_style= "Display:none" >
<div id= "table1" ></div>
</div>
<div id= "ERRMSG1" class= "formmsg" ></div>
</div>
</div>
</body>