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 相关文章推荐
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jquery中radio checked问题
Mar 16 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 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实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python中lambda与def用法对比实例分析
2015/04/30 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Python文件读写常见用法总结
2019/02/22 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
三八节主持词
2014/03/17 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
幸福终点站观后感
2015/06/04 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
高一作文之乐趣
2019/11/21 职场文书