利用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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
js+canvas绘制图形验证码
Sep 21 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python中的元类编程入门指引
2015/04/15 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
基于Python log 的正确打开方式
2018/04/28 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
竞选班长演讲稿
2013/12/30 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
个人公开承诺书
2014/03/28 职场文书
节水倡议书范文
2014/04/15 职场文书
党支部特色活动方案
2014/08/20 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
群众路线个人整改方案
2014/10/25 职场文书
化验室岗位职责
2015/02/14 职场文书
校车安全管理责任书
2015/05/11 职场文书
入党转正介绍人意见
2015/06/03 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis