JavaScript斑马线表格制作

//实现斑马线表格//方法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>

转载于:https://www.cnblogs.com/ooo888ooo/p/11372070.html

JavaScript斑马线表格制作相关推荐

HTML5制作斑马线表格,JavaScript实现的斑马线表格效果【隔行变色】
本文实例讲述了JavaScript实现的斑马线表格效果.分享给大家供大家参考,具体如下: 虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用J ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
css斑马线表格,用CSS3美化表格
CSS3美化表格 *{margin: 0;padding: 0;} body { padding: 40px 100px; } .demo { width: 600px; margin: 40px a ...
wps表格粗线和细线区别_学术论文表格制作方法解读
一.表格的精选我记得我以前写论文的时候错误认为导师会青睐那种一篇文章中表格越多越好的文章,其实不然.如果用一两句话即可说明的内容就不必列表格:如果采用多组数据表说明同一现象,造成了表格本身的重复,应 ...
excel制作录入和查询系统_excel表格制作成绩查询系统攻略:让学生隐私更安全!
对于班主任来说,无论是收集学生信息,还是发布考试成绩,用得最多的就是excel表格了!很多老师在发布成绩的时候,多半会把统计好的表格直接发到群里让学生自行查询,这样一来虽然省事,但却极易招到投诉!下面 ...
androidstudio表格中填充宽跟长一样_Excel表格的基本操作教程，覆盖表格制作的10大知识！...
Excel表格制作包含的知识比较多,通常制作一张表格需要这10大知识:新建表格.调整行高列宽.插入行列和单元格.删除行列和单元格.移动行列和单元格.表格文字编辑.单元格格式设置.表格边框与单元格边框设 ...
Javascript 调用XML制作连动下拉框
Javascript 调用XML制作连动下拉框作者: 何耀 Thursday, June 5 2003 2:44 PM 传统的HTML页面中连动下拉框采用了两种方法: 1)直接将下拉框中的内容har ...
计算机教师招聘板书设计,教师编制考试：信息技术丨《WORD表格制作》教案设计...
教师编制考试:信息技术丨<WORD表格制作>教案设计一.教学目标 (一)知识与技能 1.掌握在word中创建表格的方法. 2.了解表格中的合并单元格.拆分单元格.行高.列宽这些基本概念. ...
【css练习】斑马线表格，美人尖，断线下划线
源于 how2j教程,这是个特别好的java网站. 斑马线表格实现效果如下. <style> table{border-collapse:collapse; /*边框合并*/ width ...

JavaScript斑马线表格制作

JavaScript斑马线表格制作相关推荐

最新文章

热门文章