This article describes the method of JS controlling the dynamic generation of arbitrary row and column tables on the web page. Share it for your reference. The specific analysis is as follows:
This is a very simple code effect for generating tables online using JS
Through JS function code, you can automatically generate the table you need by directly entering the number of rows and columns
Of course, you can also extend JS code to implement various forms of generating text
Copy the code as follows: <html>
<head>
<title>Js dynamically generate tables</title>
<style type="text/css">
table{font-size:14px;}
</style>
</head>
<body >
<script language="javascript">
function tableclick(name1,name2,name3){
Trow=name1.value;
Tcol=name2.value;
Tv=name3.value;
if ((Trow=="") || (Tcol=="") || (Tv=="")){
alert("Please fill in the conditions for making the form");
}
else{
r=parseInt(Trow);
c=parseInt(Tcol);
Table1(r,c,Tv);
}
}
function tablevalue(a,ai,rows,col,str){
int1=a.length;
for (i=0;i<rows;++i){
for (j=0;j<col;++j){
if ((j==0)&&(ai>=int1)){break;}
if (ai>=int1){
str=str+"<td scope='col'></td>";
}
else{
if (j==0){
str=str+"<tr><th scope='col'>"+(a[ai++])+"</th>";
}
else{
if (j==col-1){
str=str+"<td scope='col'>"+(a[ai++])+"</td>";
}
else{
str=str+"<td scope='col'>"+(a[ai++])+"</td>";
}
}
}
}
str=str+"</tr>";
}
return str;
}
function Table1(row,col,Str1){
var str="";
a=new Array();
s=new String(Str1);
a=s.split("#");
int1=a.length;
ai=0;
if (col<=int1){
str=str+"<table width='300' border='4'>";
for (i=0;i<col;++i){
if (i==0){
str=str+"<tr><th scope='col'>"+(a[ai++])+"</th>";
}
else{
if (i==(col-1)){
str=str+"<th scope='col'>"+(a[ai++])+"</th></tr>";
}
else{
str=str+"<th scope='col'>"+(a[ai++])+"</th>";
}
}
}
if (int1>col){
if (row>1){
str=tablevalue(a,ai,row-1,col,str);
}
}
str=str+ "</table>";
aa.innerHTML=str;
}
}
</script>
<form name="form1" method="post" action="">
<p><b>Line Number:</b>
<input name="name1" type="text" value="4">
<b>Number of columns:</b>
<input name="name2" type="text" value="4">
<input type="button" name="Submit3" value="generate table" onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>
<p><b align="top">Table value:</b></p>
<p>
<input name="name3" wrap="VIRTUAL" value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3">
</p>
</form>
<div id="aa"></div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.