用js和html动态生成n行n列表格

这个怎么实现呢？如果只有一个文本框提交n,产生n行n列表格，也就是行和列共用n。还有表格外面文字的更新

推荐答案推荐于2018-02-28

这是一个非常简单使用的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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/TfCI6TfCXTT26f6f2T.html

其他回答

第1个回答推荐于2017-11-22

html部分：

js部分：

这实现了输入数字n，即生成n行n列的表格。

本回答被网友采纳

第2个回答 2018-02-28

相似回答

html中如何使用js动态添加表格答：若在当前html文件中，则写在<script>标签内部，如复制代码代码如下:<script type="text/javascript" > document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建 </script> 若是通过引入js文件，则在js文件（假设是test.js）中...

急!满意多给50分!在HTML中,通过JS动态创建一个或多个表格,并且表格可以...答：DOCTYPE html><html> <head> <title>MyHtml.html</title><style type="text/css">table{border-collapse: collapse;}td{border:1px solid red;}</style><script type="text/javascript">function addtd(obj){var td = document.createElement("td");var input = document.createElement("inp...

大家正在搜

js输入行和列生成表格 jquery动态生成表格 jquery动态生成表格函数 html快速生成表格 js生成easyui二维表格 js生成表格模板 js自动生成表单 js按列生成table js生成html