jQuery可通过选择器获取选中列的值（如复选框、表格单元格等），常用方法包括遍历匹配元素用.val()或.text()提取值，传递到另一页面时，可通过URL参数（如location.href拼接?data=value）、localStorage/sessionStorage存储，或AJAX请求，若用URL传参，目标页面需用URLSearchParams解析参数；若用本地存储，则通过localStorage.getItem()读取，选中复选框后遍历获取值，拼接为URL跳转，目标页面解析参数并渲染数据，实现跨页面数据传递。
jQuery实现选中列值传递至另一个页面的实用方法
在Web开发中，我们经常遇到这样的需求：在一个页面中选中表格或列表的特定列数据，将这些数据传递到另一个页面进行展示、处理或操作，jQuery作为轻量级的JavaScript库，以其简洁的语法和强大的DOM操作能力，能够高效地处理此类需求，结合URL参数、localStorage等技术，我们可以轻松实现跨页面数据传递，本文将详细介绍如何通过jQuery获取选中列的值,并将其传递至另一个页面的具体实现方法。
跨页面传递数据的核心思路是：在源页面（数据选择页面）获取选中列的值，通过某种方式（如URL参数、localStorage等）将数据传递到目标页面（数据展示/处理页面）,目标页面再解析并使用这些数据。
本文以URL参数传递为主要方式（适合少量数据，简单直接），辅以localStorage作为补充（适合大数据或需跨多页面共享的场景）,具体步骤如下：
- 源页面：用jQuery监听用户选中事件（如点击按钮、复选框）,获取选中列的值；
- 源页面：将值编码后拼接到URL参数中，通过
window.location.href或window.open跳转至目标页面； - 目标页面：从URL参数或localStorage中解析数据,并展示在页面中。
源页面实现：获取选中列值并传递
假设源页面有一个表格，包含"商品名称"、"价格"、"库存"三列，用户可通过复选框选中多行，点击"传递选中数据"按钮后，将选中行的"商品名称"和"价格"传递至目标页面。
页面结构（HTML）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">源页面 - 选中数据传递</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.selected-row {
background-color: #e6f7ff;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>商品列表</h2>
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectAll"> 全选</th>
<th>商品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td><input type="checkbox" class="row-checkbox"></td>
<td class="product-name">苹果手机</td>
<td class="product-price">5999</td>
<td>100</td>
</tr>
<tr data-id="2">
<td><input type="checkbox" class="row-checkbox"></td>
<td class="product-name">华为平板</td>
<td class="product-price">3999</td>
<td>80</td>
</tr>
<tr data-id="3">
<td><input type="checkbox" class="row-checkbox"></td>
<td class="product-name">小米耳机</td>
<td class="product-price">299</td>
<td>200</td>
</tr>
<tr data-id="4">
<td><input type="checkbox" class="row-checkbox"></td>
<td class="product-name">戴尔显示器</td>
<td class="product-price">1299</td>
<td>50</td>
</tr>
<tr data-id="5">
<td><input type="checkbox" class="row-checkbox"></td>
<td class="product-name">机械键盘</td>
<td class="product-price">599</td>
<td>120</td>
</tr>
</tbody>
</table>
<button id="passDataBtn">传递选中数据</button>
<button id="passDataToLocalStorageBtn">使用LocalStorage传递数据</button>
<script src="source.js"></script>
</body>
</html>
jQuery逻辑（source.js）
$(document).ready(function() {
// 全选/取消全选
$('#selectAll').on('change', function() {
$('.row-checkbox').prop('checked', $(this).prop('checked'));
toggleSelectedRow();
});
// 单选行高亮
$('.row-checkbox').on('change', function() {
toggleSelectedRow();
});
// 传递数据按钮点击事件 - URL参数方式
$('#passDataBtn').on('click', function() {
const selectedData = [];
$('.row-checkbox:checked').each(function() {
const row = $(this).closest('tr');
selectedData.push({
id: row.data('id'),
name: row.find('.product-name').text(),
price: parseFloat(row.find('.product-price').text())
});
});
if (selectedData.length === 0) {
alert('请至少选择一行数据！');
return;
}
// 将数据编码为URL参数（JSON字符串转义后拼接）
const dataParam = encodeURIComponent(JSON.stringify(selectedData));
const targetUrl = `target.html?data=${dataParam}`;
// 跳转到目标页面
window.location.href = targetUrl;
});
// 使用LocalStorage传递数据按钮点击事件
$('#passDataToLocalStorageBtn').on('click', function() {
const selectedData = [];
$('.row-checkbox:checked').each(function() {
const row = $(this).closest('tr');
selectedData.push({
id: row.data('id'),
name: row.find('.product-name').text(),
price: parseFloat(row.find('.product-price').text())
});
});
if (selectedData.length === 0) {
alert('请至少选择一行数据！');
return;
}
// 将数据存储到localStorage
localStorage.setItem('selectedProducts', JSON.stringify(selectedData));
// 跳转到目标页面
window.location.href = 'target.html';
});
// 选中行高亮切换
function toggleSelectedRow() {
$('.row-checkbox:checked').each(function() {
$(this).closest('tr').addClass('selected-row');
});
$('.row-checkbox:not(:checked)').each(function() {
$(this).closest('tr').removeClass('selected-row');
});
}
});
目标页面实现：接收并展示数据
页面结构（target.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">目标页面 - 数据
