JS如何生成动态列表


Posted in Javascript onSeptember 22, 2020

本文实例为大家分享了JS如何生成动态列表的具体代码,供大家参考,具体内容如下

JS如何生成动态列表

思路: JS中写函数----HTML中利用表单元素获取用户输入的行和列的值,调用JS中的函数。
主要用到的知识有:JS就不说了,表单元素,以及其属性value,和表格…

代码:

<!doctype html>
<html>
<head>
 <meta charset = "utf-8">
 <title>创建动态表格</title>
 <style>
  #form1{
   padding:10px; width:400px; margin:0 auto;
  }
 </style>
 <script type = "text/javascript">
  function createTable() { 
   var r1 = document.getElementById( "row" ).value;
   var c1 = document.getElementById( "col" ).value; 
   var n = 1;  //单元格中的文字
   var str = "<table width = '100%' border = '1' cellspacing = '0' cellpadding = '0' ><tbody>";
   for(i = 0; i<r1; i++) {
    str = str+"<tr align = 'center'>"
    for(j = 0; j<c1; j++) str = str+"<td>"+(n++)+"</td>"
    str = str+"</tr>"
   }
   var d1 = document.getElementById( "d1" );
   d1.innerHTML = str+"</tbody></table>";
  }
 </script>
</head>
<body>
 <form id = "form1" name = "form1" method = "post" action = "">
  <fieldset>
  <legend>动态创建表格</legend>
  输入表格的行数:<input type = "text" id = "row" placeholder = "请输入表格的行数" required autofocus /><br/>
  输入表格的列数:<input type = "text" id = "col" placeholder = "请输入表格的列数" /><br/>
  <input type = "button" id = "ok" value = "产生表格" onclick = "createTable()"/>
  </fieldset>
 </form>
 <div id = "d1"></div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 #Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
You might like
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
自行车广告词大全
2014/03/21 职场文书
演讲比赛策划方案
2014/06/11 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python何绘制带有背景色块的折线图
2022/04/23 Python