js控制表单奇偶行样式的简单方法
一、如果使用JQuery的话可以直接JQuery的
代码如下:
$("tr:odd").addClass("clazzName");
$("tr:even").addClass("clazzName");
二、如果是使用纯js的话
1.先获取table标签,var table = document.getElementById()
2.再获取里面的tbody标签var tbody = table.getElementsByTagName("tbody")[0]
3.再获取tr标签var trs = tbody.getElementsByTagName("tr")
4.然后迭代trs
代码如下:
for(var i=0; i
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
获取tbody标签是必须的,虽然你没写,但是浏览器在编译table的时候会自动给加上
所有的tr标签都是在tbody里面的
相关推荐
-
jquery实现奇偶行赋值不同css值
效果如下: 使用jquery我们可以轻松的实现上面效果,代码如下: 复制代码 代码如下: <html> <head> <title>jquery奇偶行css效果</title> <script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <style type=&quo
-
利用JQuery和JS实现奇偶行背景颜色自定义效果
JQuery实现: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
-
奇偶行高亮显示及鼠标划过高亮显示类
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码. 核心JavaScript代码: 奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px
-
js控制表单奇偶行样式的简单方法
一.如果使用JQuery的话可以直接JQuery的 复制代码 代码如下: $("tr:odd").addClass("clazzName"); $("tr:even").addClass("clazzName"); 二.如果是使用纯js的话 1.先获取table标签,var table = document.getElementById() 2.再获取里面的tbody标签var tbody = table.getElement
-
JS控制表单提交的方法
本文实例讲述了JS控制表单提交的方法.分享给大家供大家参考.具体如下: <Script Language="JavaScript"> function autoSubmit(){ var form = document.forms[0]; var actionPath = "?mo=phone"; form.action = actionPath; form.submit(); return true; } </Script> 如果需要两个提
-
jquery控制表单输入框显示默认值的方法
本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)
-
Js为表单动态添加节点内容的方法
本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
Js 控制表单域代码
1 2 3 s.options[0].selected=true //方法1 s.selectedIndex=1; //方法2 document.getElementById('ss').selectedIndex=1; //方法3,建议使用这个方法 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] js验证为正整数 复制代码 代码如下: <script> var re = /^[1-9]d*$/; //智能验证单个字符 if (!re.test(document.getElemen
-
js控制表单不能输入空格的小例子
复制代码 代码如下: window.onload=function() { var inputs=document.getElementsByTagName("input"); for (var i=0;i<inputs.length; i++) { if(inputs[i].getAttribute("type")=="text")
-
js防止表单重复提交的两种方法
第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码 代码如下: <script language=""javascript""> var checkSubmitFlg = false; function checkSubmit(){ if(checkSubmitFlg ==true){ return false; //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交. } checkS
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
-
js 判断文件类型并控制表单提交示例代码
下面的代码 实现的控制表单提交 复制代码 代码如下: function shangchuan(){ var filepath = document.getElementById("file").value; alert(filepath); if(filepath==""){ alert("请选择上传的文件!"); document.getElementById("file").disabled=true; } var ext
-
HTML表单元素覆盖样式元素问题及其补救之道
在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子.不要小看这个貌似"低级"的问题,即使一些规模较大的网站上类似的问题也绝不鲜见.本文探讨了造成这一问题的根本原因,并提出一种补救办法--之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策. 一.HTML元素的显示优先级 HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入
随机推荐
- 研究下DOS下联网的方法
- jQuery给动态添加的元素绑定事件的方法
- 制作伪开机密码
- 随机获取oracle数据库中的任意一行数据(rownum)示例介绍
- Asp.net动态生成html页面的方法分享
- 关于js遍历表格的实例
- python实现数通设备tftp备份配置文件示例
- javascript 实现父窗口引用弹出窗口的值的脚本
- js 鼠标放图片上抖动效果
- 六一国际儿童节 儿童节的由来
- Oracle 数据库操作技巧集
- JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
- 浅析JQuery UI Dialog的样式设置问题
- Android中Service与Activity之间通信的几种方式
- javascript运行机制之this详细介绍
- js实现匹配时换色的输入提示特效代码
- 又一篇不错的win2003服务器安全设置图文教程
- 如何让IE和Netscape共享书签和收藏夹
- Linux下如何搭建两个tomcat服务
- Android自定义桌面功能代码实现