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控制listbox中项的移动并排序
Nov 12 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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自动更新版权信息显示的方法
2015/06/19 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
JS严格模式原理与用法实例分析
2020/04/27 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python将文本转换成图片输出的方法
2015/04/28 Python
python实现的希尔排序算法实例
2015/07/01 Python
python编码最佳实践之总结
2016/02/14 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
《两个铁球同时着地》教学反思
2014/02/13 职场文书
企业领导对照检查材料
2014/08/20 职场文书
信息技术课教学反思
2016/02/23 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
电频谱管理的原则是什么
2022/02/18 无线电
浅谈Redis缓冲区机制
2022/06/05 Redis