在网页设计中，提高用户体验是至关重要的，尤其是在处理数据密集型的应用，如表格展示时。本文将探讨如何使用jQuery库来实现一个功能，即当用户点击表格行时，该行会高亮显示，并且行内的单选按钮会被选中。这种交互设计能够直观地反馈用户的选择，使得操作更为直观易懂。
我们需要一个简单的HTML结构，包含一个带有单选按钮的表格。表格的每一行都应该有一个单选按钮，以便用户进行选择。例如：
```html
<table id="tablight">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td><input type="radio" name="selectRow"></td>
<td>数据1</td>
<td>数据2</td>
</tr>
<!-- 更多行... -->
</table>
```
接下来，我们创建一个CSS样式来定义选中行的高亮效果。在`<head>`标签内添加以下样式：
```css
.selected {
background: #FF6500;
color: #fff;
}
```
这个`.selected`类将应用于被选中的表格行，使其背景变为橙色，文字颜色变为白色，以突出显示。
我们需要编写jQuery脚本来监听表格行的点击事件。在页面底部添加以下JavaScript代码：
```javascript
$(document).ready(function() {
// 当表格中除了表头（thead）之外的行被点击时
$("#tablight tr:gt(0)").click(function() {
// 添加.selected类到当前行，移除所有其他行的.selected类
$(this).addClass("selected").siblings().removeClass("selected");
// 查找当前行内的单选按钮并将其选中
$(this).find(":radio").attr("checked", true);
});
});
```
这段代码使用jQuery的`$(document).ready()`函数确保在DOM加载完成后执行。`$("#tablight tr:gt(0)")`选择了`id`为`tablight`的表格中除了第一行（表头）的所有行。`click()`函数监听这些行的点击事件。当用户点击某一行时，会添加`.selected`类给该行，同时移除其他行的`.selected`类，以确保每次只有一个行被选中。然后，通过`find(":radio")`找到当前行内的单选按钮，并设置其`checked`属性为`true`，使其被选中。
为了使这个功能生效，你需要在HTML文件中引入jQuery库和上述CSS及JS文件。你可以通过CDN链接或本地文件路径引入它们。例如：
```html
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="styles.css">
<!-- 引入JS文件 -->
<script src="script.js"></script>
```
确保`styles.css`和`script.js`与HTML文件位于同一目录下，或者提供正确的相对或绝对路径。
通过上述步骤，你就成功实现了当用户点击表格行时，行会高亮显示，同时单选按钮也会被选中的功能，提升了网页的用户体验。这个方法不仅适用于数据展示，还可以应用于需要选择单一选项的任何场景，如筛选、排序等操作。
