//实现斑马线表格

//方法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下通过ssh运行X图形软件

    服务器端:编辑/etc/ssh/sshd_config中的以下内容启用AllowTcpForwarding启用X11Forwarding将X11DisplayOffset设定为10. 启用X11Use ...

  2. JvmOverloads kotlin(14)（转）

    在Kotlin中@JvmOverloads注解的作用就是:在有默认参数值的方法中使用@JvmOverloads注解,则Kotlin就会暴露多个重载方法.可能还是云里雾里,直接上代码,代码解释一切:如果 ...

  3. LC 244. Shortest Word Distance II 【lock, Medium】

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  4. openerp学习笔记 视图中字段只变化(on_change)联动其他字段值、选择和过滤

    1.修改产品数量时,自动计算产品销售金额.销售成本和销售利润<field name="num" on_change="on_change_product(produ ...

  5. 溢出overflow: hidden

    如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...

  6. Python聚类算法之基本K均值实例详解

    Python聚类算法之基本K均值实例详解 本文实例讲述了Python聚类算法之基本K均值运算技巧.分享给大家供大家参考,具体如下: 基本K均值 :选择 K 个初始质心,其中 K 是用户指定的参数,即所 ...

  7. Visual Studio 展开和折叠代码快捷键

    每个cs文件代码太多,总数找不到方法.每次都是手动一个一个方法折叠手疼,赶紧搜索折叠展开快捷键. Ctrl + M + O: 折叠所有方法  Ctrl + M + M: 折叠或者展开当前方法  Ctr ...

  8. 继承以及Super

    一个小小的总结,主要关注以下三个问题:ES5的继承方式,ES5的继承与ES6的继承的区别,ES6的super的几种使用方式以及其中this的指向. From http://supermaryy.com ...

  9. API接口设计的五大公共参数

    1.平台参数 2.操作系统参数 iOS.Android.PC等等 3.软件版本参数 4.udid号(设备唯一ID) 每个设备都会有一个唯一udid 5.渠道号 app软件从那个渠道下载

  10. sql注入知识点整理（基础版）

    sql注入知识点整理(基础版) 基本步骤 判断是否报错 判断闭合符号 判断注入类型 构建payload 手工注入或者编写脚本 基本注入类型 报错型注入 floor公式(结果多出一个1):and (se ...