利用JS动态生成隔行换色HTML表格的两种方法


Posted in Javascript onOctober 09, 2018

用JS生成动态生成表格,行、列由用户输入,并使表格隔行换色

方法一.

代码:

<!DOCTYPE html>
<html>
 <head>
  <title>动态表格</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" rel="external nofollow" >-->
  <script type="text/javascript">
   function createTable(){
      var table = document.createElement("table");
      //添加边框
      table.border = "1";
      table.width = "100%";
      //table API
      //创建一行
      //var tr = table.insertRow(table.rows.length);
      //创建单元格
      //var td = tr.insertCell(tr.cells.length);
        //行,单元格
        var tr,td;
         //获得行列值
        var tr_value = document.getElementById("tr_value").value;
        var td_value = document.getElementById("td_value").value;
      for(var i=0;i<tr_value;i++){
        //循环插入元素
        tr = table.insertRow(table.rows.length);
        if(i%2 === 0){
          tr.style.backgroundColor = "#D5E3D0";
        }else{
          tr.style.backgroundColor = "#909C97";
        }
        for(var j=0;j<td_value;j++){
          td = tr.insertCell(tr.cells.length);
          td.innerHTML = "_";
          td.align = "center";
        }
      }
      //td.innerHTML = "测试";
      document.querySelector("#tb").appendChild(table);
    }
  </script>
 </head>
 <body>
 <input type="text" id="tr_value">输入行数
 <input type="text" id="td_value">输入列数
<input type="button" onclick="createTable()"; value="createTable">
<hr>
<div id="tb"></div>
 </body>
</html>

运行结果:

输入行数、列数,create Table:

利用JS动态生成隔行换色HTML表格的两种方法

方法二.

代码:

<!DOCTYPE html>
<html>
 <head>
  <title>动态表格</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" rel="external nofollow" >-->
  <script type="text/javascript">
     var rows = prompt("输入行数:", "");
     var cols = prompt("输入列数:", "");
     document.write('<table width="100%" border="1px">');
     document.write('<caption>成绩表</caption>');
     for (var row = 1; row <= rows; row++) {
       if (row % 2 == 0) {
         document.write('<tr bgcolor=#CCCCCC>');
       } else {
         document.write('<tr>');
       }
       for (var col = 0; col < cols; col++) {
         document.write('<td height="20px"></td>');
       }
       document.write('</tr>');
     }
     document.write('</table>');
  </script>
 </head>
 <body>
 </body>
</html>

运行结果:

输入行数、列数:

利用JS动态生成隔行换色HTML表格的两种方法利用JS动态生成隔行换色HTML表格的两种方法

利用JS动态生成隔行换色HTML表格的两种方法

总结

以上所述是小编给大家介绍的利用JS动态生成隔行换色HTML表格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
Vue中的$set的使用实例代码
Oct 08 #Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
You might like
供参考的 php 学习提高路线分享
2011/10/23 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python关于调用函数外的变量实例
2019/12/26 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
《王二小》教学反思
2014/02/27 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
《迟到》教学反思
2016/02/24 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Java数据结构之堆(优先队列)
2022/05/20 Java/Android