//实现斑马线表格

//方法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. Cortex-M3 SVC与PendSV

    [SVC] SVC(系统服务调用,亦简称系统调用)和PendSV(可悬起系统调用),它们多用在上了操作系统的软件开发中.SVC用于产生系统函数的调用请求.例如,操作系统通常不允许用户程序直接访问硬件, ...

  2. SQLServer-设置-Table：阻止保存要求重新创建表的更改

    ylbtech-SQLServer-设置-Table:阻止保存要求重新创建表的更改 1.返回顶部 ·不允许保存更改,阻止保存要求重新创建表的更改 · 2.返回顶部 · https://jingyan. ...

  3. pandas基础,Serires,Dataframe

    DataFrame DataFrame是Pandas中的一个表格型的数据结构,包含有一组有序的列,每列可以是不同的值类型(数值.字符串.布尔型等),DataFrame即有行索引也有列索引,可以被看做是 ...

  4. phpStudy本地搭建wordpress教程

    一.启用phpStudy环境包 phpStudy简单易用,一键启动配置本地环境; 二.wordpress博客程序 登陆wordpress官网下载最新程序,解压后提取wordpress目录下全部文件到p ...

  5. 小D课堂 - 新版本微服务springcloud+Docker教程_2_03常见的微服务框架

    笔记 3.常见的微服务框架     简介:讲解常用的微服务框架 consumer: 调用方         provider: 被调用方         一个接口一般都会充当两个角色(不是同时充当) ...

  6. Mysqlfunc.c

    int rc;int db_connection;char *server = "192.168.139.207"; // 数据库的ip地址char *user = "c ...

  7. 安装xampp扩展你要注意这些

    Windows下安装PHP扩展是一件很麻烦的事情,看一个xampp扩展的附件名一般都是这样的命名规则,如:xampp_http-5.3-nts-svn20091125-vc9-x86.zip 你要了解 ...

  8. Kafka 可视化工具（Kafka Tool）

    Kafka 可视化工具 使用Kafka的小伙伴,有没有为无法直观地查看 Kafka 的 Topic 里的内容而发过愁呢? 下面推荐给大家一款带有可视化页面Kafka工具:Kafka Tool (目前最 ...

  9. Spring集成CXF获取HttpServletRequest,HttpServletResponse

    最近的项目中,在Spring继承CXF中要用到request来获取IP,所以先要获取到HttpServletRequest对象,具体方法如下: 1.配置文件: <jaxrs:server id= ...

  10. JAVA_day2_运算符

    Java运算符 一.算术运算符 ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果不同 1.++在左边,a先自增1再赋值给b int a=3 int b=++a 2.++在右边,先赋值 ...