用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. hdoj5671 BestCoder Round #81 (div.2)

    对于交换行.交换列的操作,分别记录当前状态下每一行.每一列是原始数组的哪一行.哪一列即可. 对每一行.每一列加一个数的操作,也可以两个数组分别记录.注意当交换行.列的同时,也要交换增量数组. 输出时通 ...

  2. sql server编写通用脚本自动检查两个不同服务器的新旧数据库的表结构差异

    问题:工作过程中,不管是什么项目,伴随着项目不断升级版本,对应的项目数据库业务版本也不断升级,数据库出现新增表.修改表.删除表.新增字段.修改字段.删除字段等变化,如果人工检查,数据库表和字段比较多的 ...

  3. HTML实现单行时文字居中，多行文字时左对齐显示效果

    css代码: div { width: 100px; padding: 5px; text-align: center; background-color: #5dffa0; } p { paddin ...

  4. 2017百度之星资格赛 1003：度度熊与邪恶大魔王（DP）

    .navbar-nav > li.active > a { background-image: none; background-color: #058; } .navbar-invers ...

  5. DP HDOJ 5492 Find a path

    题目传送门 题意:从(1, 1)走到(n, m),每次往右或往下走,问(N+M−1)∑(Ai−Aavg)2 的最小值 分析:展开式子得到(N+M−1)∑(Ai2) - (∑(Ai))2的最小值.用普通 ...

  6. 字符串处理 Codeforces Round #297 (Div. 2) B. Pasha and String

    题目传送门 /* 题意:给出m个位置,每次把[p,len-p+1]内的字符子串反转,输出最后的结果 字符串处理:朴素的方法超时,想到结果要么是反转要么没有反转,所以记录 每个转换的次数,把每次要反转的 ...

  7. josephus 问题的算法（转载）

    Josephus 问题: 一群小孩围成一个圈,任意假定一个数 m,从第一个小孩起,顺时针方向数,每数到第 m 个小孩时,该小孩便离开.小孩不断离开,圈子不断缩小,最后剩下的一个小孩便是胜利者.究竟胜利 ...

  8. select选择框中，model传的值并非是页面上的值，而是另一个值

    对于编程来说,money和rebate代表的是金额优惠和折扣优惠,采用money或rebate便于数据存储.但是页面显示给用户的时候是金额优惠和折扣优惠,并不是显示编程中所存储数据.所以选择的mode ...

  9. Lumia 刷机（强刷）Message send failed解决办法

    强刷可以救砖,不需要验证地区code,可以跨刷其它国家/地区的固件,但不是所有机型都可以这样,Lumia 620是支持跨刷的. 看本文你首先要知道使用Nokia Care Suite强刷的步骤,参考从 ...

  10. AJPFX:不用递归巧妙求出1000的阶乘所有零和尾部零的个数

    package com.jonkey.test; import java.math.BigInteger; public class Test6 { /*** @param args*  需求:求出1 ...