点击单选按钮 实现表格的隔行变色

最新推荐文章于 2022-11-29 19:45:44 发布
最新推荐文章于 2022-11-29 19:45:44 发布
阅读量148 收藏
点赞数
文章标签： xhtml javascript ViewUI 
<!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/xhtml">
<style>
/*定义了三个样式*/
.once{
	background-color:#0FC;
	 }
.after{
background-color:#F00;	
	}	 
.selected1{
	background-color:#33C;
	   }

</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script>
<script language="javascript" type="text/javascript"  >
//使用jquery绑定事件
$(document).ready(function (){
	//各行变色
         $("tr:even").addClass("once");
		 $("tr:odd").addClass("after");
		 //根据type获取了所有的radio框，并且给radio添加事件
		 $("input[type='radio']").click(function (){
	     //如果radio被选中则给选中的改行增加样式
		 $("input[type='radio']:checked").parents("tr").addClass("selected1"); 
	     //如果没有被选中则移除selected样式
		  //alert($("input:not(input:checked)").length);
		   $("input:not(:checked)").parents("tr").removeClass("selected1"); 
	 
		  });
	 });
/*注意：表格中的name名称一定要相同*/ 
</script>
</head>

<body>
<table width="600" border="1">
  <tr>
    <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
   <td><input type="radio" name="box" /></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>

iteye_264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易的点击按钮隔行变色
NIUMIN_boke的博客
12-08 317
简易的点击按钮隔行变色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*css的样式*/ div{width: 250px;height: 45px;margin-bottom: ...
JQuery实现表格隔行变色，鼠标经过的行放大显示
hikevin17的专栏
09-28 923
        JQuery以其简洁实用的特点深受开发人员的喜爱，呵呵，我也是才刚刚开始学习的，一来就体会到了这迷人的优势。下面就将自己在课堂上所学和一些新的思想写出来，大家共勉。        JQuery还是适合前台（客户端）开发一些，对于网页设计师也是很容易就能掌握的，因为不用自己去写那一行行艰涩的javascript代码，同时也能屏蔽不同浏览器的差异，就光是这一点就超赞了。    
JQuery实现表格隔行换色，鼠标移动变色，点击选择变色
dengqi4009的博客
11-23 259
Code <%@PageLanguage="C#"AutoEventWireup="true"Codebehind="WebForm1.aspx.cs"Inherits="WebApplication14.WebForm1"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitiona...
JavaScript实现li隔行变色
weixin_30628801的博客
10-28 110
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function () { ...
详解jQuery简单的表格应用
10-20
在此应用场景中，可以为表格的奇偶行定义不同的背景色，创建隔行变色的效果。具体操作是使用jQuery选择器选中奇偶行，并添加相应的类名，从而应用预定义的CSS样式。此外，还可以通过单选框或复选框来控制表格行的...
JQ四个常见案例.rar
08-26
3. **隔行变色**：在表格中，隔行变色可以提高数据的可读性。jQuery可以通过遍历行并应用不同的CSS类实现这一功能。例如，使用`$('tr:even').addClass('evenColor')`和`$('tr:odd').addClass('oddColor')`分别对偶数...
bootstrap table列和表头对不齐的解决方法
10-16
striped: true, // 隔行变色 pagination: true, // 底部显示分页码 pageSize: 30, // 每页显示行数 pageNumber: 1, // 页码 pageList: [30, 50, 100, 200, 500], // 每页显示数量选择器 idField: "objectId", ...
bootstrap笔记总结
12-29
* Bootstrap 提供了多种表格样式，包括基本表格、隔行变色表格、边框表格等。 * 使用 `class="table"` 可以创建一个基本表格。 * 使用 `class="table-striped"` 可以创建一个隔行变色表格。 * 使用 `class="table-...
EhLib 3.6.rar
12-07
在传统的DBGRID控件中，用户往往只能看到基本的数据表格，无法自定义显示样式，例如隔行变色。而EhLib 3.6的一大亮点就是它提供了隔行显示颜色的功能，这使得数据网格看起来更加清晰，有助于用户在大量数据中快速...
使用JavaScript实现点击按钮实现隔行换色
song17631538490的博客
11-29 777
给按钮标签设置点击事件给按钮后续使用if语句进行判断因flag默认值为true所以if（flage）=if(true) 就会执行if语句下的代码。设置循环主要是为了将li标签全部循环一遍因为是隔行变色所以通过i%2==0获取到不相邻的两个数后续修改下标不相邻两个数的li标签设置新的class属性 从而实现点击后隔行换色的效果。添加flage是为了让按钮可以重复点击使用点击第一次 运行的是if（fage）里的代买再点击一次 运行的是else里的代码。
JS DOM练习
weixin_44154094的博客
01-15 321
练习：做一个可以点击按钮切换图片的网页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #pic{ width: 500px; height: 400px; }
点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。
C#.NET专栏
04-26 2039
window.onload = function () {             document.getElementById('btn').onclick = function () {                 var trs = document.getElementById('tb').getElementsByTagName('tr');                
JS实现li各行变色，且在各行变色基础上实现鼠标移入变色，移除变为原来的颜色
GrowingRick的博客
02-15 2728
1、JS实现隔行变色 <body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>ddddddd</li> <li&g...
实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复的另一种方法
天空守护云
01-24 654
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
利用JS实现表格的隔行变色效果
weixin_45658984的博客
02-01 1878
在开发中我们经常会看见表格隔行变色的案例 为了在看表格里面的数据不小心看错行数,所以就有了这样的效果 成果图 html和css代码 <style> table{ width: 500px; margin: 100px auto; padding: 0; } t...
按钮控制li标签背景改变颜色
GUOSJIA的博客
03-11 1038
JavaScript:btn控制&lt;li&gt;&lt;/li&gt;背景改变颜色&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
用vant的单选按钮实现点击全选反选操作
最新发布
07-28
可以使用 Vant UI 中的单选按钮（Radio）组件来实现点击全选和反选操作。 首先，你需要在页面中引入 Vant 组件库。 ```html 全选 (item, index) in list" :key="index" :title="item.label"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值