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
-
奇偶行高亮显示及鼠标划过高亮显示类
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码. 核心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
-
利用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
-
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),密码输入
随机推荐
- Ueditor百度编辑器的Html模式自动替换样式的解决方法
- swift控件工厂类的实现代码
- 优秀js开源框架-jQuery使用手册(1)
- js监控IE火狐浏览器关闭、刷新、回退、前进事件
- iis6和iis7限制上传文件(请求头)大小以及不支持FSO解决方法
- JavaScript实现cookie的写入、读取、删除功能
- swtich/if...else的替代语句
- php三种实现多线程类似的方法
- C#中ref和out的区别浅析
- Android Bitmap压缩方式分析
- js一般方法改写成面向对象方法的无限级折叠菜单示例代码
- Flex中实现对一个text渲染不同的字体颜色示例
- javascript实现数字+字母验证码的简单实例
- Ajax轮询请求状态(微信公众号带参数二维码登录网站)
- MSSQL output使用
- jquery ajax结合thinkphp的getjson实现跨域的方法
- 详解centos7配置本地yum源的方法
- 在CentOS 7下使用yum配置MySQL源并安装MySQL
- Windows下java、javaw、javaws以及jvm.dll等进程的区别
- Android WebView使用方法详解 附js交互调用方法