页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>对tr的选中变色处理</title>
<link rel="stylesheet" type="text/css" href="model.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
a {
text-decoration: none;
color: grey;
margin-right: 5px;
}
a:hover {
text-decoration: underline;
}
.span_name {
height: 20px;
cursor: pointer;
}
.div_mscs_head{
width:100%;
height:30px;
line-height:30px;
background-color:#D1EEEE;
text-align:right;
}
.div_mscs_head span {
float: left;
margin-left: 10px;
color: green;
}
.div_mscs_head a{
margin-right:10px;
}
.div_mscs_body{
padding: 0 20px;
height:220px;
}
</style>
<script>
$('#tbl').find('tr:not(.tr_add):gt(0)').live('mouseover', function(){
$(this).not('[chosen]').css('backgroundColor', '#ebebeb');
}).live('mouseout', function(){
$(this).not('[chosen]').css('backgroundColor', '#ffffff');
}).live('click', function(){
if(!$(this).is('[chosen]')){
$('#tbl').find('tr:not(.tr_add):gt(0)').filter('[chosen]').css('backgroundColor', '#ffffff').removeAttr('chosen');
$(this).css('backgroundColor', '#cdcdcd').attr('chosen', true);
} else {
$(this).css('backgroundColor', '#ffffff').removeAttr('chosen');
}
});
</script>
</head>
<body>
<div class="aui-normal">
<div class="fspan12 fspan-common-fmp label_title"><span>选择tr<span></div>
</div>
<div class="aui-normal">
<div class="fspan3 fspan-common-fmp"><span>当前选择：</span><span style="color:red;">tr自定义位置</span></div>
</div>
<div class="aui-normal in-center">
<div class="fspan6 fspan-common-fmp">
<div class="aui-normal in-center">
<table id="tbl" class="table_normal" cellpadding="0" cellspacing="0">
<thead>
<tr class="tr_title">
<th>名称</th>
<th>类型</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">zhaoyun</span>
</td>
<td style="width:25%">
<span style="color:green">运动</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">yunxiang</span>
</td>
<td style="width:25%">
<span style="color:green">服装</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">dchyun</span>
</td>
<td style="width:25%">
<span style="color:green">吃喝</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</body>
</html>
分享到：
相关推荐
这个"jQuery仿excel表格选中变色效果代码"是一个示例项目，旨在模仿Microsoft Excel中的单元格选中时改变颜色的特性，为网页中的表格提供类似的操作体验。这种效果可以提升用户界面的互动性和用户体验。 在...
在本例中，我们讨论了使用jQuery实现点击表格行（tr）来控制对应行内复选框（checkbox）选中状态的方法。 要实现点击表格行（tr）以选中或取消选中内部的复选框（checkbox），首先需要了解几个关键的jQuery方法。...
在jQuery中，实现同辈元素的选中/未选中效果是常见的交互设计，尤其在列表或选项展示时。这个实例代码提供了一个简单的解决方案，它使用了jQuery的类操作功能来改变元素的视觉状态。 首先，我们需要理解HTML结构。...
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果，以增强用户界面的交互性。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，它允许我们高效地选取DOM元素。例如，`$("#...
在实际应用中，我们经常需要根据用户的选择状态来改变表格的视觉效果，比如选中某行后改变其颜色，以突出显示。下面将详细介绍如何在layui的表格中实现这一功能，并涉及到相关的JavaScript和CSS知识。 首先，layui...
3. **CSS样式**：为了可视化选中效果，我们需要定义CSS类`selected`。例如，我们可以改变背景色： ```css tr.selected { background-color: #FFFFCC; /* 自定义颜色 */ } ``` 4. **API参考**：在提供的`...
标题所指的知识点是JQuery的一个简单应用实例，具体是通过点击网页表格中的某一行（tr标签）来切换对应行内复选框（checkbox）的选中状态。 描述提到的内容是对上述实例的简要介绍，并鼓励读者学习和参考实例代码，...
2. **CSS样式**："选中table样式"可能是指为选中状态的行设计特定的视觉效果，比如改变背景色、边框样式等。这可以通过CSS类来实现，例如`.selected`，当行被选中时添加这个类，使其显示不同的样式。 3. **...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画效果。本示例中，我们关注的是"jQuery Table点击选中表格行变色代码"，这是一个用于实现用户交互功能的常见需求，即当用户...
【jQuery仿Excel表格选中变色效果特效代码详解】 在网页开发中，有时我们需要实现类似Excel表格的功能，其中一项关键特性就是选中单元格时，背景颜色会改变，以突出显示当前选择。jQuery库因其易用性和丰富的插件库...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于“jQuery table选中表格行变色”这一功能，它在交互式网页设计中尤为常见，可以提升用户体验。下面将...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能，即当用户点击表格中的某一行时，该行会变色...
在网页开发中，jQuery是一个非常流行的...通过结合CSS类和DOM操作，可以进一步完善用户体验，如添加视觉反馈或动画效果。在实际项目中，确保正确引用jQuery库，并根据需要调整代码以适应特定的HTML结构和需求。
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果以及异步请求等任务。对于批量删除单元格内容的需求，jQuery 提供了便利的方法来实现这一功能。本文将详细介绍如何...
在很多页面都会需要根据加载的数据来控制checkbox是否选中，以前的方法在这个UI里并不适用，现贴下两种代码供大家参考。 前提条件：该字段在数据库中是以“，”间隔的字符串，如：“WIFI,电视,有线宽带” 第一种：...
2. CSS样式：要实现行选中效果，可以通过修改CSS来改变选中行的样式。可以为选中状态创建一个类，如`.selected`，并设置相应的背景色、边框等样式。然后，当用户点击某行时，动态添加或移除这个类。 3. JavaScript/...
我们可以为未选中的单元格设置默认样式，然后为选中的单元格创建一个新的类，如`.selected`，并为其定义不同的背景色或者其他视觉效果。例如： ```css td { border: 1px solid #ccc; padding: 5px; } .selected ...
此外，还需要添加适当的CSS样式来定义选中行的高亮效果。例如： ```html <!DOCTYPE html> <title>jQuery 表格插件示例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
文章讲述的是如何使用jQuery来实现当用户点击表格中的复选框时，可以改变该行的背景色，从而实现选中行变色的效果。下面将详细介绍实现这一效果所涉及的知识点。 1. jQuery基础 jQuery是一个快速、简洁的JavaScript...