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里面的

赞 (0)

相关推荐

  • jquery实现奇偶行赋值不同css值

    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为表单动态添加节点内容的方法

    本文实例讲述了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实现表单多文件上传样式美化支持选中文件后删除相关项

    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表单元素覆盖样式元素问题及其补救之道

    在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子.不要小看这个貌似"低级"的问题,即使一些规模较大的网站上类似的问题也绝不鲜见.本文探讨了造成这一问题的根本原因,并提出一种补救办法--之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策. 一.HTML元素的显示优先级 HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入

随机推荐