JS控制網頁動態生成任意行列數表格的方法

2024-05-06 16:16:16

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS控制網頁動態生成任意行列數表格的方法,實例分析了javascript操作表格節點控制dom元素添加的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS控制網頁動態生成任意行列數表格的方法。分享給大家供大家參考。具體分析如下：

這是一個非常簡單使用的JS在線生成表格的代碼效果
通過JS功能代碼，直接輸入行數和列數就可以自動生成你需要的表格
當然你也可以擴展JS代碼實現生成文字的各種形式

復制代碼代碼如下:

		<html>
		<head>
		<title>Js動態生成表格</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("請將制作表格的條件填寫完整");
		  }
		  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>行數：</b>
		    <input name="name1" type="text" style="width:40px" value="4">
		    <b>列數：</b>
		<input name="name2" type="text" style="width:40px" value="4">
		<input type="button" name="Submit3" value="生成表格" onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>
		 <p><b align="top">表值：</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>