首先在页面引入jquery.js库文件
取表格当前行数据js代码:
$(function() {
$(".myclass").each(function(){
var tmp=$(this).children().eq(3);
var btn=tmp.children();
btn.bind("click",function(){
var id=btn.parent().parent().children("td").get(0).innerHTML;
var name=btn.parent().parent().children("td").get(1).innerHTML;
var age=btn.parent().parent().children("td").get(2).innerHTML;
alert("id="+id+" name="+name+" age="+age);
});
});
});
jsp代码:
<table border="1">
<thead>
<tr>
<th align="center"> id</th>
<th align="center">姓名</th>
<th align="center">年龄</th>
<th align="center">编辑</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="t">
<tr class="myclass">
<td align="center">
<c:out value="${t.id}"></c:out>
</td>
<td align="center">
<c:out value="${t.name}"></c:out>
</td>
<td align="center">
<c:out value="${t.age}"></c:out>
</td>
<td align="center">
<button id="edit" >编辑</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
说明:list为后台传入,点击编辑按钮取得对应按钮行的值,效果图如下:
分享到:
相关推荐
本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...
本文将深入探讨“jQuery动态表格数据分页插件”,这款插件能够帮助开发者轻松实现动态表格数据的分页显示,同时支持自定义设置分页参数,以提高网页的性能和用户交互性。 首先,jQuery是一个广泛使用的JavaScript库...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...
这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案,无需服务器端的支持,使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理...
本知识点将深入探讨如何使用jQuery实现模糊搜索功能,特别是在表格数据中的应用。 首先,模糊搜索的核心在于实时过滤表格中的数据,根据用户在输入框中输入的关键词匹配表格中的行。在jQuery中,我们可以监听`input...
- **编辑**:选中行后显示编辑按钮,点击后同样弹出表单,但表单预填当前行的数据,编辑完成后通过PUT请求更新数据。 - **删除**:确认删除后,发送DELETE请求至服务器删除对应的数据。 4. **用户界面** - **...
表格可能使用`<thead>`定义表头,`<tbody>`存放数据行,而分页元素通常会包含在`<div>`或其他容器内。 `style.css`文件则包含了项目的样式规则,用于定义表格的布局、颜色、字体等视觉效果。对于分页,可能涉及到...
本示例"jQuery JSON动态获取表格数据代码.zip"是关于如何利用jQuery和JSON来动态地填充表格数据,同时提供了一些交互功能,如折叠和展开表格行。下面将详细解释相关知识点。 首先,jQuery库的使用: 1. DOM操作:...
本项目“jQuery表格行展开隐藏代码”是利用jQuery与Bootstrap.js的结合,实现了一种动态的表格展示效果,尤其适用于数据展示和信息管理场景。 Bootstrap.js是由Twitter开发的一个流行的前端开发框架,它提供了丰富...
本文将深入探讨如何使用jQuery实现表格行的增删功能,以及多选删除的实现方法。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`(表格行)元素、`<td>`(表格数据)元素组成。例如...
本资源“jQuery不刷新分页动态数据表格代码”是针对网页开发中的一个常见需求——实现数据表格的分页功能,且无需页面整体刷新。这种功能对于提高用户体验至关重要,特别是在处理大量数据时。 首先,我们要理解...
使用jQuery表格排序插件的主要步骤可能包括: 1. **引入依赖**:首先在HTML文件中引入jQuery库和表格排序插件的JavaScript和CSS文件。 2. **初始化插件**:通过JavaScript选择表格元素并调用插件方法,如`$("#...
本教程将详细讲解如何利用jQuery实现一个无刷新表格插件,以便于在网页中控制分页显示数据,提高用户体验。 首先,理解"无刷新"的概念至关重要。传统的网页操作,如点击分页按钮,通常会触发页面整体刷新,这可能...
**jQuery 简单表格排序** 在Web开发中,数据展示是常见的需求,尤其是在处理大量结构化信息时,表格(Table)是首选的布局方式。然而,为了提高用户体验,我们通常需要实现表格数据的动态排序功能。jQuery是一个轻...
1. **DOM操作**:jQuery提供了简便的方法来选择、遍历和操作DOM元素,如$("#tableId")用于选取ID为"tableId"的表格,然后可以使用$.each()遍历表格行和单元格。 2. **数据获取**:将表格数据转换为适合导出的格式,...
-- 表格数据行 --> ``` 接下来是CSS(`css`文件),用于美化表格和可能的筛选指示器。例如,可以为被选中的列添加一个特殊样式。 ```css .selected { background-color: lightblue; } ``` 最后,我们关注...
本主题聚焦于“jQuery table选中表格行变色”这一功能,它在交互式网页设计中尤为常见,可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先,我们需要一个基本的HTML表格结构,例如: ```html ...
本文将深入探讨如何使用jQuery实现表格的动态增删改功能,并结合后台数据进行绑定,以构建高效的数据展示和管理界面。 首先,我们要理解jQuery的核心概念。jQuery通过选择器(如$("#id")或$(".class"))来选取DOM...
在IT行业中,jQuery是一个广泛使用的JavaScript库...通过以上步骤,你可以利用jQuery实现表格的动态添加和删除行功能,为用户提供更直观和灵活的数据管理界面。这种技术在数据录入、展示和编辑等场景中具有广泛的应用。
**jQuery表格树插件详解** ...综上所述,`jQuery表格树插件`是实现网页中表格数据树形展示的有力工具,通过其丰富的功能和易用的API,能够帮助开发者快速构建具有交互性和良好用户体验的表格应用。