js dynamically generates a table with a specified number of rows

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

WBOY

Release： 2016-05-16 17:29:09

Original

1292 people have browsed it

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

The effect is as shown below:
js dynamically generates a table with a specified number of rows_javascript skills

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:
js dynamically generates a table with a specified number of rows_javascript skills

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 "/";
%>

test

<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 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>

动态生成表格

行