jQueryTable点击选中表格行变色代码.zip资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

版权申诉

jquery代码

jquery特效

jquery插件

jquery实例

66 浏览量 2023-09-21 16:22:52 上传评论收藏 37KB ZIP 举报

《jQuery实现表格行点击选中变色功能详解》在网页开发中，表格（Table）是一种常见的数据展示方式，为了提升用户体验，我们常常需要在用户点击表格行时改变其颜色，以显示当前选中状态。jQuery作为一个轻量级、功能强大的JavaScript库，为我们提供了便捷的DOM操作方法，实现这一功能并不复杂。本篇将详细讲解如何使用jQuery实现表格行点击变色的效果。我们需要理解jQuery的基本用法。jQuery通过$函数创建一个选择器，用来选取HTML元素。例如，`$('table tr')`会选择所有的表格行（tr元素）。然后，我们可以使用`.click()`方法为这些元素绑定点击事件，当用户点击时触发相应的函数。在提供的压缩包文件中，我们看到有三个主要部分：index.html（HTML页面）、js（JavaScript脚本）和css（CSS样式表）。HTML用于构建表格结构，CSS用于美化表格，而JavaScript（jQuery）则负责处理交互逻辑。 1. **HTML结构**：在HTML中，创建一个简单的表格，每个tr元素代表一行数据。例如： ```html <table id="myTable"> <tr><td>数据1</td><td>数据2</td></tr> <tr><td>数据3</td><td>数据4</td></tr>  </table> ``` 2. **CSS样式**：创建一个CSS类，定义被选中行的样式，例如： ```css .selected { background-color: #ccc; /* 你可以自定义颜色 */ } ``` 3. **jQuery实现**：在JavaScript中，我们需要在表格行上绑定点击事件，并在事件处理函数中切换`.selected`类。示例代码如下： ```javascript $(document).ready(function() { $('#myTable tr').click(function() { // 移除所有行的选中样式 $('#myTable tr.selected').removeClass('selected'); // 添加当前点击行的选中样式 $(this).addClass('selected'); }); }); ``` 这段代码首先等待文档加载完成（`$(document).ready`），然后对`#myTable`下的所有tr元素设置点击事件。当用户点击某行时，先移除所有行的`selected`类，再将当前点击行添加该类，从而实现点击变色的效果。 4. **jQuery插件**：如果你需要更复杂的表格操作，如排序、过滤或分页，可以考虑使用jQuery插件，如DataTables（https://datatables.net/）。这个插件提供了丰富的功能和定制选项，能极大地提升表格的交互性和功能。总结，通过结合HTML、CSS和jQuery，我们可以轻松地实现表格行点击变色的功能，提升用户的交互体验。对于更复杂的需求，可以借助jQuery插件进一步扩展。对于初学者，理解并实践这些基本原理是提升前端技能的重要步骤。

展开

资源推荐

资源详情

资源评论

收起资源包目录

jQuery Table点击选中表格行变色代码.zip （4个子文件）

table.js 6KB

jquery.min.js 91KB

css

build.css 9KB

index.html 2KB

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<link rel="stylesheet" type="text/css" href="css/build.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

<style>
* { margin: 0; padding: 0; }
body { font-family: 'Microsoft Yahei'; font-size: 18px; background-color: #f8f8f8; }

#table {
  width: 1200px;
  margin: 40px auto 0;
  border-collapse: collapse;
  background-color: #fff;
}
#table td,
#table th {
  padding: 0.75em 1.5em;
}
#table thead {
  color: #fff;
  background-color: #31bc86;
}
#table thead th {
  text-align: left;
}
#table tbody {}
#table tbody tr {
  border-bottom: 2px dashed #000;
  cursor: default;
  transition: all .125s ease-in-out;
}
#table tbody tr:hover {
  /*background-color: rgba(129,208,177,.3);*/
}
#table tbody tr.event-bgColor {
  background-color: rgba(255, 192, 203, .2);
}
#table tbody tr.default-bgColor {
  background-color: #fff;
}
#table tbody tr.hover-bgColor {
  background-color: rgba(255, 192, 203, .8);
}
#table tbody tr.selected-bgColor {
  background-color: rgb(255, 192, 203);
}
input {
  width: 16px;
  height: 16px;
}
#selectAll {
  margin-left: -4px;
}
.checkbox {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>

<table id="table">
	<thead>
		<tr>
			<th class="checkbox checkbox-primary">
			<input type="checkbox" class="styled" id="selectAll">
			<label for="selectAll">全选</label>
			</th>
			<th>名称</th>
			<th>邮箱</th>
			<th>固定电话</th>
			<th>手机</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/table.js'></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>