//实现斑马线表格

//方法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. 【南工程开源计划】南京工程学院 信息与通信工程学院 课程设计说明书(论文) 宽带接入技术--WLAN接入设计

    文章目录 蓝奏云文件存放地址 一.课程设计目的 二.课程设计要求 三.课程设计网络环境 四.课程设计内容 4.1 WLAN接入设计 4.1.1设计拓扑 4.1.2设计原理 1)WLAN 2)RADIU ...

  2. golang 要去学习的文档记录

    xrom开发文档地址: http://gobook.io/read/github.com/go-xorm/manual-zh-CN/chapter-10/ golang基础知识: https://ww ...

  3. 往Angular应用程序中添加DevExtreme

    To start this tutorial, you need an Angular 5+ application created using the Angular CLI. Refer to t ...

  4. Oracle COALESCE函数

    Oracle COALESCE函数 Oracle COALESCE函数语法为COALESCE(表达式1,表达式2,...,表达式n),n>=2,此表达式的功能为返回第一个不为空的表达式,如果都为 ...

  5. webpack对vue单文件组件的解析

    vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...

  6. 阶段3 3.SpringMVC·_07.SSM整合案例_05.ssm整合之Spring整合SpringMVC的框架

    点击超连接,执行controller里面的方法 那么就需要在Controller里面定义Service对象,就需要依赖注入进来. 启动tomcat服务器,web.xml里面的前端控制器会帮我加载spr ...

  7. AngularJS unit test report / coverage report

    参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...

  8. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  9. Autofac实现AOP拦截

    本文主要是详解一下在ASP.NET Core中,采用替换后的Autofac来实现AOP拦截. Aspect Oriented Programming(AOP),面向切面编程,是一个比较热门的话题.AO ...

  10. CTF—攻防练习之HTTP—命令执行漏洞

    渗透环境: 主机:192.168.32.152 靶机:192.168.32.1 命令执行漏洞 命令执行漏洞概念:当应用需要调用一些外部程序去处理内容的情况下,就会用到一些执行系统命令的函数.如PHP中 ...