JS controls how web pages dynamically generate tables for any number of rows
- 2020-05-12 02:10:33
- OfStack
This article illustrates an example of how JS controls the dynamic generation of a table with any number of rows and columns on a web page. Share with you for your reference. The specific analysis is as follows:
This is a very easy to use JS code effect for generating tables online
With the JS function code, directly enter the number of rows and columns to automatically generate the table you need
You can also extend the JS code to generate various forms of text
<html>
<head>
<title>Js Dynamically generated table </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 complete 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> Number of lines: </b>
<input name="name1" type="text" style="width:40px" value="4">
<b> The number of columns: </b>
<input name="name2" type="text" style="width:40px" value="4">
<input type="button" name="Submit3" value=" Generated form " onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>
<p><b align="top"> Table values: </b></p>
<p>
<input name="name3" wrap="VIRTUAL" style="width:520px " 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 has been helpful to your javascript programming.