这是一个非常简单使用的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=0i<rows++i){
for (j=0j<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=0i<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>
第一步,打开HBuilder开发工具,在指定的Web项目中新建静态页面init.html,并引入Bootstrap和AngularJS相关的文件第二步,在body元素添加ng-controller指令,并在里面添加<table></table>
第三步,在<script></script>里编写AngularJS初始化函数,并声明控制器
第四步,预览该静态页面,在浏览器查看页面效果,显示一个输入框和按钮
第五步,在控制器中添加变量model,这个变量赋值数组
第六步,在表格table循环model变量,遍历该数组并给表格赋值