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 相关文章推荐
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
js计时事件实现圆形时钟
Mar 25 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中实现记住密码自动登录的代码
2011/03/02 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
js实现验证码干扰(动态)
2021/02/23 Javascript
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
三星法国官方网站:Samsung法国
2019/10/31 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
三年级学生期末评语
2014/12/26 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python实现排序方法常见的四种
2021/07/15 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android