用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. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（七） 学生信息增删

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  2. E20180418-hm

    utility n. [计]工具; 公用事业; 功用,效用; 有用的物体或器械; 公用事业公司; identity n. 身份; identifier  n. 识别符; 检验人,标识符; 鉴别器; 编 ...

  3. Linux下自动还原MySQL数据库的Shell脚本

    创建shell脚本topjui_source.exp,内容如下: #!/usr/bin/expect spawn echo "###### running... ######" s ...

  4. Java | 技术应用 | 利用Jsoup处理页面

    根据微信公众号的推文链接地址,对文章内容进行爬取,利用jsoup解析文章源代码,加上结合xpth提取文文章信息, 利用正则表达式读取文章发表时间. Jsoup <!-- jsoup HTML p ...

  5. python计算代码运行时间的装饰器

    import time def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() result = func(*args, ...

  6. 数组Reduce的应用

    数组Reduce的应用 参考 简单应用 var arr = [1,2,3,4,5] var sum = arr.reduce(function (prev, cur, index, arr) { co ...

  7. httpclient 3.1跳过https请求SSL的验证

    一.因为在使用https发送请求的时候会涉及,验证方式.但是这种方式在使用的时候很不方便.特别是在请求外部接口的时候,所以这我写了一个跳过验证的方式.(供参考) 二.加入包,这里用的是commons- ...

  8. 转 python 将一个文件中内容添加到另一个文件指定位置

    http://blog.csdn.net/huguangshanse00/article/details/14624601

  9. find missing conjunction, why?

    find . -name *.c find: missing conjunction, why? SHELL会把*.c直接扩展成当前工作目录的多个.c文件,所以必须用单引号'*.c'或者/*.c进行转 ...

  10. 130 Surrounded Regions 被围绕的区域

    给定一个二维的矩阵,包含 'X' 和 'O'(字母 O), 找到所有被 'X' 围绕的区域.并将区域里所有 'O'用 'X' 填充.例如,X X X XX O O XX X O XX O X X运行你 ...