<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery鼠标移动表格变色及修改单元格值</title>
</head>
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>jq sort</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//鼠标移到tr上变色
$("table tr").mouseover(function(){
$(this).css("background","#FFCCCC");
});
$("table tr").mouseout(function(){
$(this).css("background","");
});
//点击tr行时把单元格内容负值到文本框中
var tr;
$("table tr").click(function(){
tr = $(this);
$("#id1").val($(this).find("td:eq(0)").text());
$("#id2").val($(this).find("td:eq(1)").text());
$("#id3").val($(this).find("td:eq(2)").text());
});
$("#bt1").click(function(){
if(tr!=null){
tr.find("td:eq(0)").text($("#id1").val());
tr.find("td:eq(1)").text($("#id2").val());
tr.find("td:eq(2)").text($("#id3").val());
}
});
});
</script>
姓名：<input id="id1" type="text" value="测试">
性别：<input id="id2" type="text" value="人妖">
年龄：<input id="id3" type="text" value="9999">
<input id="bt1" type="button" value="修改" />
<table width="481" height="97" border="1">
<tr align="center" bgcolor="#FFCCCC">
<th width="134" height="23" scope="col">姓名</th>
<th width="121" scope="col">性别</th>
<th width="204" scope="col">年龄</th>
</tr>
<tr align="center">
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr align="center">
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center">
<td>星等</td>
<td>男</td>
<td>21</td>
</tr>
<tr align="center">
<td>李四</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<p> </p>
</body>
</html>
- 大小: 4.7 KB
分享到：
相关推荐
jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...
当用户按下鼠标按钮时触发`mousedown`，在鼠标移动时触发`mousemove`，而当用户释放鼠标按钮时触发`mouseup`。在`mousemove`事件中，我们可以动态更新选定的单元格范围，并改变它们的颜色。 以下是一个简单的实现...
本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能，帮助开发者创建更具视觉辨识度的数据展示表格。 首先，我们来看一下基本的HTML结构。在给出的示例中，一个简单的表格（`<table>`）被创建，包含了表头...
对于表格变色，我们也需要考虑不同屏幕尺寸下的表现，可能需要调整CSS规则以适应手机和平板等移动设备。 7. **性能优化**： 在处理大量数据的表格时，避免对每个单元格都绑定事件处理器，这可能导致性能下降。可以...
在这个“CSS Hover表格变色样式特效.zip”压缩包中，包含了一个实用的jQuery和CSS结合实现的表格元素hover效果的代码示例，该示例可以方便地应用于网页中，为用户提供更直观和友好的交互体验。 首先，我们来理解CSS...
通过上述分析，我们不仅了解到如何使用jQuery实现表格行在鼠标经过时的变色效果，而且还接触到了其他相关的知识点，如选择器的使用、事件处理、CSS样式的动态修改、动态内容处理以及跨浏览器兼容性等。这些知识对于...
1. 鼠标移动行变色：jQuery的`hover()`函数用于在鼠标进入和离开时执行不同的操作。例如，当鼠标悬停在表格行上时，可以通过添加`hover`类来改变行内单元格的颜色，反之则移除该类以恢复原色。 2. 奇偶行不同颜色：...
1. 鼠标移动行变色： 这个功能可以通过`.hover()`事件来实现。当鼠标悬停在表格行上时，给该行的单元格添加一个类，离开时移除这个类。两种方法的代码如描述所示，主要通过`addClass()`和`removeClass()`方法。 2....
每行包含六个单元格，其中前三个单元格用于展示数据，后三个单元格重复了前三个的数据，这样做的目的是为了展示表格的隔行变色效果。在实际应用中，你可以根据需要替换这些数据。 通过以上代码，Bootstrap 自动实现...
1. **鼠标移动到行更换背景色**： 通过添加和移除CSS类，我们可以实现当鼠标悬停在表格行上时改变背景色的效果。定义一个`.hover` CSS类，然后使用jQuery的`hover()`函数来监听鼠标进入和离开事件，分别添加和移除...
在本文中，我们将探讨如何创建一个基于jQuery的表格插件，这个插件是受到easyUI的dataGrid的启发，具备动态加载JSON数据、自动分页、全选与反选、行悬停变色以及隔行变色等功能。下面将详细介绍这个过程。 首先，...
2. **响应式设计**：考虑到移动设备的普及，使用媒体查询实现响应式表格至关重要。你可以根据屏幕尺寸调整表格布局，如隐藏某些列或者改变列宽。 ```css @media (max-width: 600px) { table, thead, tbody, th, td...
1. **CSS选择器**：为了特定的表格或单元格应用变色效果，我们需要正确选择目标元素。例如，`table`, `tr`, `td` 或 `th` 选择器可以分别用于选择整个表格、行、列或表头。 2. **边框属性**：CSS中的`border`属性...
鼠标移动行变色 利用JQuery的`.hover()`方法，可以实现当鼠标悬停在表格行上时，为该行的所有单元格添加一个`hover`类，从而改变样式。`.hover()`方法接受两个函数作为参数，第一个函数在鼠标悬停时触发，第二个...
7. **响应式设计**：随着移动设备的普及，表格的响应式设计也变得至关重要。好的表格样式应能在不同尺寸的屏幕上自适应，保持良好的布局和可读性。 8. **数据可视化**：除了基础的表格样式，还可以通过图表（如条形...