//实现斑马线表格

//方法1:

document.write('<table border="1">');

for(var i=1; i<11; i++){

    if(i % 2 ==0){

        document.write('<tr style="background-color:blue;color:#fff;">');

    }else{

        document.write('<tr style="background-color:yellow;color:green;">');

    }

    for(var j=1; j<8; j++){

        document.write('<td>单元格' + j + '</td>');

    }

    document.write('</tr>');

}

document.write('</table>');

//方法2:

var tableWp = '<table border="1">';

for(var i=0; i<10; i++){

    if(i % 2 != 0){

        tableWp += '<tr style="background-color:red;color:blue;">';

    }else{

        tableWp += '<tr style="background-color:blue;color:yellow">';

    }

    for(var j=0; j<7; j++){

        tableWp += '<td>单元格' + j + '</td>';

    }

    tableWp += '</tr>';

}

tableWp += '</table>';

document.write(tableWp);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <script type="text/javascript" src="js/demo.js" ></script>

    </body>

</html>

JavaScript斑马线表格制作的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  3. Microsoft Excel Sheet/表格 制作折线图

    Microsoft Excel Sheet/表格 制作折线图 虽然比较简单,但是仍然需要稍微花一点功夫. 1.制作好表格数据 2.先将数据选定(不包括 横座标的 年月日或其他的刻度 的那一列) 3.插 ...

  4. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  5. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  6. 利用javascript:void(0)制作假的提交按钮替代button

    在写html页面,我们很自然的在表单提交的地方采用button来作为提交按钮,但是,用<button type=”button”>按钮</button>作为提交代码会有个问题, ...

  7. Latex表格制作记录

    Latex表格制作记录 主要功能 合并表格的行列 长表格的使用 makecell例程借鉴 效果图 参考代码 \documentclass{ctexart} \usepackage{indentfirs ...

  8. day36—javascript对表格table的操作应用（一）

    转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...

  9. 基于JavaScript的表格设计：按序添加或删除班级的学生信息

    目的: 制作一个表格,显示班级的学生信息 功能: 鼠标移到不同行,背景色发生改变,离开恢复原背景色 添加.删除按钮,可添加,可删除. 程序流程: 首先先建立绑定事件函数. 其次建立鼠标移动改变背景色函 ...

随机推荐

  1. 浏览器是如何处理页面元素的Download？

    首先,浏览器对于script的下载是避免并行进行的.HTTP/1.1协议中规定浏览器和同一host之间只建立最多两个连接,也就是说允许的最 大并行度为2(当然,对IE和Firefox来说,你都可以通过 ...

  2. springboot备忘

    1.springboot中有ApplicationRunner类,如果项目中的启动类名称也是ApplicationRunner,单元测试时需要注意:import不要import到springboot的 ...

  3. AutoItLibrary测试Windows GUI

    AutoItLibrary库关键字 AutoItLibrary 的对象操作大体上有几大主要部分,Window 操作.Control 操作.Mouse 操作.Process操作.Run 操作.Reg 操 ...

  4. 判断List是否为空的问题

    今天公司安排给页面调试Bug,感觉公司人员写的判断判断List是否为空存在一定的问题,公司判断是list!=null这是完全不对的,这只会判断是否有list对象.如果为空,他也会执行if(list!= ...

  5. LC 877. Stone Game

    Alex and Lee play a game with piles of stones.  There are an even number of piles arranged in a row, ...

  6. Cookie类

    Cookie类:用于存储会话数据 1)构造Cookie对象 Cookie(java.lang.String name, java.lang.String value) 2)设置cookie void ...

  7. MYSQL 中 MyISAM与InnoDB两者之间区别与选择，详细总结，性能对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  8. RxJava2实战---第五章 变换操作符和过滤操作符

    RxJava2实战---第五章 变换操作符和过滤操作符 RxJava的变换操作符主要包括以下几种: map():对序列的每一项都用一个函数来变换Observable发射的数据序列. flatMap() ...

  9. Linux安装Vmware Tools/vmtools（通用）

    以下方法适用于centos/Ubuntu #新建一个临时目录,用于挂载光驱 mkdir /tmp/cdrom mount -t iso9660 /dev/cdrom /tmp/cdrom cp -r ...

  10. Django中间件梳理

    Django之中间件   中间件简介 什么是中间件 中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django的输入和输出.每个中间 ...