//实现斑马线表格

//方法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. Linux 安全工具之extundelete误删除恢复

    一:前言 在Linux中,我们通常会因为误删除文件而感到烦恼,rm -rf +文件  rf参数简直就是每个运维的噩梦,但是大家想过没,为什么删除文件那么快呢,为什么我们copy文件的时候那么慢. 其实 ...

  2. RobotFramework测试库速查表

    标准库 序号 标准库 说  明 1 Builtin 包含经常需要的关键字,自动导入无需import 2 Dialogs 提供了暂停测试执行和从用户的输入方式 3 Collections 提供一组关键词 ...

  3. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

  4. tensorflow读取图片案例

    1.知识点 """ 1.图片读取流程与API: 1.构造图片文件队列 文件队列API: a)tf.train.string_input_producer(string_t ...

  5. go 基础 变量和常量

    package main import "fmt" //全局变量,赋值 var( PI float32 = 3.1415 Count ) //全局变量,无值 var( x stri ...

  6. PGI 遇到的坑

    以下记录为本人在使用PGI社区版编译器遇到的问题,包含两类问题 1,PGI编译器本身存在你的bug. 2,在其他编译器编译运行没问题,在PGI中出现问题. 版本(18.11社区版) 1,(bug)内置 ...

  7. Hibernate对象的状态分类

    对象的状态: 临时状态Transient: 与数据库没有对应,跟Session没有关联 一般是新new出的对象 持久化状态Persistent: 对象在Session的管理之中,最终会有对应的数据库记 ...

  8. postman插件的安装以及简单介绍

    1:postman是干什么的? Postman官网上这么介绍的:“Modern software is built on APIs,Postman helps you develop APIs fas ...

  9. C#编程 socket编程之unity聊天室

    上面我们创建了tcp的客户端和服务端,但是只能进行消息的一次收发.这次我们做一个unity的简易聊天室,使用了线程,可以使用多个客户端连接服务器,并且一个客户端给服务器发消息后,服务器会将消息群发给所 ...

  10. 机器学习笔记：支持向量机(svm)

    支持向量机(svm)英文为Support Vector Machines 第一次接触支持向量机是2017年在一个在线解密游戏"哈密顿行动"中的一个关卡的二分类问题,用到了台湾教授写 ...