首页 web前端 js教程 js控制表单奇偶行样式的简单方法_javascript技巧

js控制表单奇偶行样式的简单方法_javascript技巧

May 16, 2016 pm 05:27 PM
样式 表单

一、如果使用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里面的
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何实现PHP表单提交后的页面跳转 如何实现PHP表单提交后的页面跳转 Aug 12, 2023 am 11:30 AM

如何实现PHP表单提交后的页面跳转【简介】在Web开发中,表单的提交是一项常见的功能需求。当用户填写完表单并点击提交按钮后,通常需要将表单数据发送至服务器进行处理,并在处理完后将用户重定向至另一个页面。本文将介绍如何使用PHP来实现表单提交后的页面跳转。【步骤一:HTML表单】首先,我们需要在HTML页面中编写一个包含表单的页面,以便用户填写需要提交的数据。

macOS:如何更改桌面小部件的颜色 macOS:如何更改桌面小部件的颜色 Oct 07, 2023 am 08:17 AM

在macOSSonoma中,小部件不必隐藏在屏幕外,也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反,它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时,macOS桌面小部件会采用单色样式淡入背景,从而减少干扰,并允许您专注于活动应用程序或窗口中手头的任务。但是,当您单击桌面时,它们将恢复为全彩色。如果您更喜欢单调的外观,并且希望在桌面上保留这一方面的统一性,那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

如何处理PHP表单中的用户权限管理 如何处理PHP表单中的用户权限管理 Aug 10, 2023 pm 01:06 PM

如何处理PHP表单中的用户权限管理随着Web应用程序的不断发展,用户权限管理是一个重要的功能之一。用户权限管理可以控制用户在应用程序中的操作权限,保证数据的安全性和合法性。在PHP表单中,用户权限管理可以通过一些简单的代码来实现。本文将介绍如何处理PHP表单中的用户权限管理,并给出相应的代码示例。一、用户角色的定义和管理首先,对用户角色进行定义和管理是用户权

如何使用 JavaScript 实现表单的输入框内容实时校验功能? 如何使用 JavaScript 实现表单的输入框内容实时校验功能? Oct 18, 2023 am 08:47 AM

如何使用JavaScript实现表单的输入框内容实时校验功能?在很多网页应用中,表单是用户与系统之间最常用的交互方式。然而,用户输入的内容往往需要进行有效性校验,以确保数据的准确性和完整性。在这篇文章中,我们将学习如何使用JavaScript实现表单的输入框内容实时校验功能,并提供具体的代码示例。创建表单首先,我们需要在HTML中创建一个简单的表

如何使用 JavaScript 实现表单的输入框内容自动提示功能? 如何使用 JavaScript 实现表单的输入框内容自动提示功能? Oct 20, 2023 pm 04:01 PM

如何使用JavaScript实现表单的输入框内容自动提示功能?简介:表单的输入框内容自动提示功能在网页应用中非常常见,它可以帮助用户快速输入正确的内容。本文将介绍如何使用JavaScript实现这一功能,并提供具体的代码示例。创建HTML结构首先,我们需要创建一个包含输入框和自动提示列表的HTML结构。可以使用以下代码:<!DOCTYP

WordPress网页错位现象解决攻略 WordPress网页错位现象解决攻略 Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中,有时候我们会遇到网页元素错位的情况,这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象,我们需要仔细分析问题、查找可能的原因,并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略,同时提供具体的代码示例,帮助开

CSS网页背景图设计:创建各种背景图样式和效果 CSS网页背景图设计:创建各种背景图样式和效果 Nov 18, 2023 am 08:38 AM

CSS网页背景图设计:创建各种背景图样式和效果,需要具体代码示例摘要:在网页设计中,背景图是一种重要的视觉元素,它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果,并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果,以达到更好的视觉效果和用户体验。关键词:CSS,背景图,设计样式,效果,代码示

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能 如何使用HTML、CSS和jQuery实现表单自动保存的高级功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能在现代网页应用中,表单是非常常见的元素之一。当用户在输入表单数据时,如何能够实现自动保存的功能,不仅可以提高用户的使用体验,也能确保数据的安全性。本文将介绍如何使用HTML、CSS和jQuery来实现表单的自动保存功能,并附上具体的代码示例。一、HTML表单的结构搭建我们首先来建立一个简单的HT

See all articles