选中checkbox框 实现表格的隔行变色（二）

最新推荐文章于 2022-07-19 10:56:25 发布
最新推荐文章于 2022-07-19 10:56:25 发布
阅读量852 收藏
点赞数
文章标签： javascript function xhtml jquery border input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUMHSX/article/details/7399868
版权 
<!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");
		 //根据name获取所有的check，然后进行循环
		 $("input[name='box']").each(function (){
			 //给check添加事件
			 $(this).click(function (){
				 //判断check是否被选中
			   if(this.checked==true){
				 $(this).parent().parent().addClass("selected1");
				  }else{
				 $(this).parent().parent().removeClass("selected1");	  
					  }
			      }); 
			   });
			
			
		 
   });
  
</script>
</head>

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

</body>
</html>

HUMHSX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
10-21
在本教程中，我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先，我们要明白jQuery中的`$(document).ready()`函数，它表示当...
表格隔行换色 鼠标移过变色
09-06
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能就是，勾选复选框，高亮显示当前行，也就是当前行样式改变。这是一个非常常见的使用场景，官网给我们提供了一个带Checkbox的table表格，但是并没有给出上述使用案例，解决办法有很多，我简单总结下我自己的实现过程，希望能帮助到有同样需求的小伙伴。 勾选表格中当前项时会触发selection-change事件，在中绑定handleSelectionChange方法。 编
flex 表格勾选后 鼠标滚动会自动勾选_Excel 复选框 – 勾选后整行会变色
weixin_39669204的博客
11-28 168
Excel 中的控件都是好东西，很多朋友跟我说轻易不敢用，因为对于宏命令不熟悉。其实，不是所有控件的应用场景都需要添加宏的，比如今天要教的：当勾选复选框时，整行变色；取消勾选，恢复无色。关于复选框的应用，我曾经讲解过一个非常经典的案例，图表中的图形会根据复选框的选择与否，自动显示或不显示，请参见：Excel 制作带复选框的动态图表案例：下表 1 是保单续保统计表，现在需要在 B 列添加复选框，实现...
jquery的table隔行变色、复选框的选择变色
dunyanan1的专栏
03-26 1824
parent .even{ background-color:#0FF; } .odd{ background-color:#F9F;} .selected{ background:#CCC; } .selected1{ background-color:#99F; } $(document).ready(function(){ $("tr:even").
JS实现表格隔行变色以及复选框的全选和全不选
BullZeng的博客
05-07 373
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; //设置表格隔行换色 functio
JS 隔行换色，checkbox选中换色，checkbox全选
起风了
03-01 432
function changeColor() {//隔行换色     /*for (var i = 0; i     rows.rows[i].onmouseover = function () {     this.style.backgroundColor="yellow";     }     rows.rows[i].onmouseout = function () {
gridcontrol隔行变色、焦点行颜色、改变显示值、固定列
06-30
在本文中，我们将深入探讨如何利用GridControl实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能，并提供相关的源码示例。 1. **隔行变色**： 隔行变色是一种常见的视觉增强技巧，它可以...
jquery操作表格隔行,滑动,点击,变色
03-22
在“jquery操作表格隔行,滑动,点击,变色”这个主题中，我们将深入探讨如何使用jQuery来增强HTML表格的功能，包括隔行变色、滑动效果、点击响应以及多选框选中行的变色。 1. **隔行变色**：在HTML表格中，为了提高...
用简洁的jQuery方法toggleClass实现隔行换色
10-25
这种方法不仅适用于表格，还可以应用于其他需要隔行变色的列表，如无序列表（`<ul>`）和有序列表（`<ol>`）。同时，由于jQuery的兼容性和广泛支持，这种解决方案在各种现代浏览器中都能很好地工作。 总结来说，...
excel选定行变色
ZhangFengFree的专栏
10-14 763
Private Sub Worksheet_SelectionChange(ByVal Target As Excel.Range) On Error Resume Next Cells.FormatConditions.Delete With Target.EntireRow.FormatConditions .Delete .Add xl
JS代码：复选框全选事件，选中行变色
日月同晖的专栏
09-02 2964
复选框：全选按钮： /*全选，called by 全选按钮事件*/function checkall() { var checkbox = document.getElementsByName("checkbox"); var selectall = document.getElementsByName("selectall"); for ( var i = 0;
element-ui中el-table（隔行换色，复选框回显）
diehange3086的博客
09-25 947
1.隔行换色 el-table加上改属性,然后操作该方法 之后在添加颜色 2.复选框回显 a:表格数据不是动态加载的情况下，表格会自动选中之前选中的 b:表格数据是动态获取的，需要根据行来进行回显 原理：拿已经存储好的之前选中的数据去匹配表格中某一行的某一个属性，两个数组对象中可以匹配上，表格便...
winform checkedlistbox不显示复选框_Excel勾选复选框单元格变色和自动计数，你知道是怎么实现的吗？...
weixin_39804620的博客
12-10 406
Excel中，我们经常会使用复选框来打勾打叉，这是复选框最基本的功能，相信很多小伙伴都会，但今天我跟大家分享的是复选框的其他操作技巧，勾选复选框变色，统计人数。下图中，我们要利用复选框是否打钩来确定哪些人想去团建。具体操作步骤如下：1、点击菜单栏的“开发工具”选项卡，在“控件”工具组中点击“插入”，选择“复选框(窗体控件)”，分别插入到A3:A13单元格中，删除复选框中的文字内容，只保留复选框。2...
勾选checkbox后行变色代码
03-25 1029
public void bind() { SqlConnection con = new SqlConnection("Server=.;database=pubs;uid=sa;pwd="); SqlDataAdapter da = new SqlDataAdapter("select top 5 * from authors",con); DataSet ds = new DataSet();
修改el-checkbox 选中后的颜色
weixin_46156770的博客
07-19 4823
修改el-checkout 选中后的颜色
jQuery轻松实现表格的隔行变色，点击行变色
zwt90的专栏
03-27 8376
jQuery轻松实现表格的隔行变色，点击行变色： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 使用jquery设置表格样式 .even{  background-color:red; } .odd{  background-color:g
JQuery 点击表格中的复选框使其背景变色
qq_45746493的博客
10-26 872
点击表格中的复选框使其背景变色 使用css代码写出页面的布局 <style> table,table td{ border: 1px solid blueviolet; border-collapse: collapse; } table,table th{ border: 1p...
checkbox选中变色
最新发布
04-08
要修改复选框选中时的背景颜色，可以使用CSS样式来实现。根据提供的引用内容[^1]，可以看到以下代码片段： ```css input[type=checkbox]:checked::after { content: "✓"; color: #fff; font-size: 10px; line-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值