这篇文章主要介绍了 JS 控制网页动态生成任意行列数表格的方法, 实例分析了 javascript 操作表格节点控制 dom 元素添加的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: