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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
python实现类之间的方法互相调用
2018/04/29 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
2014年幼儿园保育工作总结
2014/12/02 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
java实现对Hadoop的操作
2021/07/01 Java/Android
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python