用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. Objective-C中的字符串格式化输出（转载）

    转自:http://www.cnblogs.com/jackbutler/archive/2012/04/05/2432828.html %@ 对象 %d, %i 整数 %u 无符整形 %f 浮点/双 ...

  2. （水题）洛谷 - P1583 - 魔法照片

    https://www.luogu.org/problemnew/show/P1583 设计一个strcut cmp用来比较,就可以了. #include<bits/stdc++.h> u ...

  3. HDU 4542 小明系列故事——未知剩余系 （数论|反素数）

    分析 kuangbin的blog已经讲的很好了,我做一点补充 1.当做x*y>z的比较时,如果x \(\ast\) y过大,可以写成x>z/y 2.分解质因数时选择用f[][0]保存质数, ...

  4. hdoj【1006】【未完待续】

    题意: 时钟的三个指针在两两之间至少D°的时候是开心的,求开心时间占一天的一个百分比. 思路: 我们看到这个百分比有三位小数,精度很高. 一天有24h,24*60min,24*60*60s,那么最小单 ...

  5. hdu 3622 Bomb Game【二分+2-SAT+tarjan】

    用read()会挂 二分半径,显然最优的是所有原都用这个最小半径,然后2-SAT把相交的圆建图,跑tarjan判一下可行性即可 #include<iostream> #include< ...

  6. spring简介、容器、IOC

    对IOC的理解: 在平时的java应用开发中,我们要实现某一个功能或者说是完成某个业务逻辑时至少需要两个或以上的对象来协作完成,在没有使用Spring的时候,每个对象在需要使用他的合作对象时,自己均要 ...

  7. hdu2489 Minimal Ratio Tree dfs枚举组合情况+最小生成树

    #include <stdio.h> #include <set> #include <string.h> #include <algorithm> u ...

  8. Flexbox布局的基本概念

    flex container(flex容器 或 弹性容器) flex容器是flex元素的的父元素. 通过设置display 属性的值为flex 或 inline-flex定义. 注旧版本的属性值: b ...

  9. Helvetic Coding Contest 2017 online mirror (teams allowed, unrated) J

    Description Heidi's friend Jenny is asking Heidi to deliver an important letter to one of their comm ...

  10. JavaScript禁止键入非法值，只有这些才能被键入

    JavaScript禁止键入非法值,只有这些才能被键入(k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)| ...