JS控制网页动态生成任意行列数表格的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
jQuery随机密码生成的方法
Mar 09 #Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 #Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 #Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 #Javascript
jquery插件corner实现圆角边框的方法
Mar 09 #Javascript
jQuery中animate用法实例分析
Mar 09 #Javascript
深入探讨JavaScript String对象
Mar 09 #Javascript
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js函数调用的方式
2014/05/06 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
深入解读Python解析XML的几种方式
2016/02/16 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python中字典和集合学习小结
2017/07/07 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
详解Python中的测试工具
2019/06/09 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
优良学风班总结材料
2014/02/08 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
详解非极大值抑制算法之Python实现
2021/06/28 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers