js dynamically generates a table with a specified number of rows_javascript skills

The following js implementation can be used to generate a table with the number of rows required by the user.
1. First fill in the following code in the body to get the row value filled in by the user

Copy the code The code is as follows:

Dynamicly generate table

row

< /br>

< ;/div>

The effect is as shown below:

2.Add js code in header

Copy code The code is as follows:

<script> <br>function table() { <br>if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]* $") == -1) { <br>document.getElementById("errmsg1").style.display = "block";//Judge whether Num is empty or not a number and prompt an error <br>document.getElementById("errmsg1 ").innerHTML = "Prompt message: The row number is empty or not a number! "; <br>} <br>else { <br>document.getElementById("errmsg1").style.display = "none";// Hide prompt information<br>var Num = parseInt(document.getElementById("Num").value); //Get the number of rows<br>var flag = true; <br>var data = ""; <br>data = " <table >"; <br>data = " <tr>" <br>"<td >we are</td>" <br>"<td >zhuzhu</td>" <br>"<td >dudu</td>" <br>"</tr>" ; <br>for (var i = 1; i <= Num; i ) { <BR>data = "<tr >"; <br>data = "<td>" i "</td>"; <br>data = "<td><input name='ColdDay" i "' type ='text' class='input'></td>"; <br>data = "<td><input name='ColdCureMethod" i "' type='text' class='input'&gt ;</td>"; <br>data = "</tr>"; <br>} <br>data = "</table>"; <br>document.getElementById("div1"). style.display = "block"; <br>document.getElementById("table1").innerHTML = data; <br>} <br>} <br></script>

generated The effect is as follows:

3. All codes are as follows:

Copy the code The code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>











<script> <br>function table() { <br>if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) { <br>document.getElementById("errmsg1").style.display = "block";//判断payNum是否为空或不是数字 提示错误 <br>document.getElementById("errmsg1").innerHTML = "提示信息：行数为空或不是数字！"; <br>} <br>else { <br>document.getElementById("errmsg1").style.display = "none";//隐藏提示信息 <br>var Num = parseInt(document.getElementById("Num").value); //获取分期数 <br>var flag = true; <br>var data = ""; <br>data = " <table >"; <br>data = " <tr>" <br>"<td >we are</td>" <br>"<td >zhuzhu</td>" <br>"<td >dudu</td>" <br>"</tr>" ; <br>for (var i = 1; i <= Num; i ) { <BR>data = "<tr >"; <br>data = "<td>" i "</td>"; <br>data = "<td><input name='ColdDay" i "' type='text' class='input'></td>"; <br>data = "<td><input name='ColdCureMethod" i "' type='text' class='input'></td>"; <br>data = "</tr>"; <br>} <br>data = "</table>"; <br>document.getElementById("div1").style.display = "block"; <br>document.getElementById("table1").innerHTML = data; <br>} <br>} <br></script>

动态生成表格

行

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn