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

方法一.

代码:

 <!DOCTYPE html>

 2 <html>

 3   <head>

 4     <title>动态表格</title>

 5

 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 7     <meta http-equiv="description" content="this is my page">

 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 9

10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

11    <script type="text/javascript">

12       function createTable(){

13             var table = document.createElement("table");

14             //添加边框

15             table.border = "1";

16             table.width = "100%";

17

18             //table API

19             //创建一行

20             //var tr = table.insertRow(table.rows.length);

21             //创建单元格

22             //var td = tr.insertCell(tr.cells.length);

23                //行，单元格

24                var tr,td;

25                   //获得行列值

26                var tr_value = document.getElementById("tr_value").value;

27                var td_value = document.getElementById("td_value").value;

28             for(var i=0;i<tr_value;i++){

29                 //循环插入元素

30                 tr = table.insertRow(table.rows.length);

31                 if(i%2 === 0){

32                     tr.style.backgroundColor = "#D5E3D0";

33                 }else{

34                     tr.style.backgroundColor = "#909C97";

35                 }

36                 for(var j=0;j<td_value;j++){

37                     td = tr.insertCell(tr.cells.length);

38                     td.innerHTML = "_";

39                     td.align = "center";

40

41                 }

42             }

43

44             //td.innerHTML = "测试";

45

46             document.querySelector("#tb").appendChild(table);

47         }

48    </script>

49   </head>

50

51   <body>

52   <input type="text" id="tr_value">输入行数

53   <input type="text" id="td_value">输入列数

54 <input type="button" onclick="createTable()"； value="createTable">

55 <hr>

56 <div id="tb"></div>

57   </body>

58 </html>

运行结果:

输入行数、列数，create Table:

方法二.

代码:

 <!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">-->

     <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>

运行结果:

输入行数、列数:

*仅供参考，转载请注明

*代码①参考:https://www.cnblogs.com/hwgok/p/5739822.html#4080148

利用JS动态生成隔行换色HTML表格的更多相关文章

  1. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  2. 利用JavaScript的%做隔行换色

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  3. php隔行换色输出表格

    <?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...

  4. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  5. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  6. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  7. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  9. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

随机推荐

  1. EJ20170430-hm

    alignment  n. 结盟; 队列,排成直线; 校直,调整; [工] 准线 aspect ratio  n. 宽高比; 纵横比,屏幕高宽比 aspect   n. 方面; thick   n.  ...

  2. iOS后台模式BackgroundMode

    概述 iOS平台提供给应用特殊的后台服务,应用在后台时仍被允许能执行一会. 后台模式 UIBackgroundModes Xcode Modes 1. audio -> Audio.Airpla ...

  3. 修改 jq weui cityPicker.js原来的值

    1.对接后台接口,拿到返回来的值,注意数据格式要一样 var raw; $.ajax({ type: "GET", url: "/web/region/list.json ...

  4. ASP.NET Core中间件计算Http请求时间

    ASP.NET Core通过RequestDelegate这个委托类型来定义中间件 public delegate Task RequestDelegate(HttpContext context); ...

  5. 第二篇 .NET高级技术之密闭类和静态类及扩展方法

    1.密闭类是修饰为sealed的类, sealed不能有子类.一般只有系统中的一些基本类声明为sealed.面试题:是否可以编写一个类继承自String类? 答:不能,因为string被声明为了sea ...

  6. mybatis使用要点（2019.5.19）

    接口入参 只有一个参数,叫啥都没问题 有两个参数以上,需使用@Param,否则名字依次为0.1.2和param1.param2.param3 一般用#,防sql注入:偶尔用$,比如需要动态表名等 接口 ...

  7. hdu1162 Eddy's picture 基础最小生成树

    #include <cstdio> #include <cmath> #include <cstring> #include <algorithm> # ...

  8. AtCoder Regular Contest 074 F - Lotus Leaves

    题目传送门:https://arc074.contest.atcoder.jp/tasks/arc074_d 题目大意: 给定一个\(H×W\)的网格图,o是可以踩踏的点,.是不可踩踏的点. 现有一人 ...

  9. Educational Codeforces Round 19 B

    Description You are given sequence a1, a2, ..., an of integer numbers of length n. Your task is to f ...

  10. 模拟 HDOJ 5099 Comparison of Android versions

    题目传送门 /* 题意:比较型号的大小 模拟:坑点在长度可能为5,此时设为'A' */ #include <cstdio> #include <algorithm> #incl ...