`

jquery得到表格当前行数据

阅读更多

首先在页面引入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合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...

    jQuery动态表格数据分页插件

    本文将深入探讨“jQuery动态表格数据分页插件”,这款插件能够帮助开发者轻松实现动态表格数据的分页显示,同时支持自定义设置分页参数,以提高网页的性能和用户交互性。 首先,jQuery是一个广泛使用的JavaScript库...

    使用jquery实现表格动态分页

    本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...

    jQuery动态表格数据分页检索排序代码

    这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案,无需服务器端的支持,使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理...

    jQuery模糊搜索表格数据代码

    本知识点将深入探讨如何使用jQuery实现模糊搜索功能,特别是在表格数据中的应用。 首先,模糊搜索的核心在于实时过滤表格中的数据,根据用户在输入框中输入的关键词匹配表格中的行。在jQuery中,我们可以监听`input...

    jQuery AJAX表格控件源码

    - **编辑**:选中行后显示编辑按钮,点击后同样弹出表单,但表单预填当前行的数据,编辑完成后通过PUT请求更新数据。 - **删除**:确认删除后,发送DELETE请求至服务器删除对应的数据。 4. **用户界面** - **...

    jquery表格插件带分页动态数据表格代码

    表格可能使用`&lt;thead&gt;`定义表头,`&lt;tbody&gt;`存放数据行,而分页元素通常会包含在`&lt;div&gt;`或其他容器内。 `style.css`文件则包含了项目的样式规则,用于定义表格的布局、颜色、字体等视觉效果。对于分页,可能涉及到...

    jQuery JSON动态获取表格数据代码.zip

    本示例"jQuery JSON动态获取表格数据代码.zip"是关于如何利用jQuery和JSON来动态地填充表格数据,同时提供了一些交互功能,如折叠和展开表格行。下面将详细解释相关知识点。 首先,jQuery库的使用: 1. DOM操作:...

    jQuery表格行展开隐藏代码.zip

    本项目“jQuery表格行展开隐藏代码”是利用jQuery与Bootstrap.js的结合,实现了一种动态的表格展示效果,尤其适用于数据展示和信息管理场景。 Bootstrap.js是由Twitter开发的一个流行的前端开发框架,它提供了丰富...

    jquery对表格行增删操作

    本文将深入探讨如何使用jQuery实现表格行的增删功能,以及多选删除的实现方法。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据)元素组成。例如...

    jQuery不刷新分页动态数据表格代码.zip

    本资源“jQuery不刷新分页动态数据表格代码”是针对网页开发中的一个常见需求——实现数据表格的分页功能,且无需页面整体刷新。这种功能对于提高用户体验至关重要,特别是在处理大量数据时。 首先,我们要理解...

    jquery的表格排序插件

    使用jQuery表格排序插件的主要步骤可能包括: 1. **引入依赖**:首先在HTML文件中引入jQuery库和表格排序插件的JavaScript和CSS文件。 2. **初始化插件**:通过JavaScript选择表格元素并调用插件方法,如`$("#...

    jQuery表格插件无刷新表格控制分页显示数据

    本教程将详细讲解如何利用jQuery实现一个无刷新表格插件,以便于在网页中控制分页显示数据,提高用户体验。 首先,理解"无刷新"的概念至关重要。传统的网页操作,如点击分页按钮,通常会触发页面整体刷新,这可能...

    jquery 简单表格排序

    **jQuery 简单表格排序** 在Web开发中,数据展示是常见的需求,尤其是在处理大量结构化信息时,表格(Table)是首选的布局方式。然而,为了提高用户体验,我们通常需要实现表格数据的动态排序功能。jQuery是一个轻...

    jquery导出表格

    1. **DOM操作**:jQuery提供了简便的方法来选择、遍历和操作DOM元素,如$("#tableId")用于选取ID为"tableId"的表格,然后可以使用$.each()遍历表格行和单元格。 2. **数据获取**:将表格数据转换为适合导出的格式,...

    jQuery设置表格列字段筛选改变代码

    -- 表格数据行 --&gt; ``` 接下来是CSS(`css`文件),用于美化表格和可能的筛选指示器。例如,可以为被选中的列添加一个特殊样式。 ```css .selected { background-color: lightblue; } ``` 最后,我们关注...

    jQuery table选中表格行变色

    本主题聚焦于“jQuery table选中表格行变色”这一功能,它在交互式网页设计中尤为常见,可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先,我们需要一个基本的HTML表格结构,例如: ```html ...

    jquery表格动态增删改及取数据绑定数据完整方案

    本文将深入探讨如何使用jQuery实现表格的动态增删改功能,并结合后台数据进行绑定,以构建高效的数据展示和管理界面。 首先,我们要理解jQuery的核心概念。jQuery通过选择器(如$("#id")或$(".class"))来选取DOM...

    74、jquery表格动态添加删除行代码

    在IT行业中,jQuery是一个广泛使用的JavaScript库...通过以上步骤,你可以利用jQuery实现表格的动态添加和删除行功能,为用户提供更直观和灵活的数据管理界面。这种技术在数据录入、展示和编辑等场景中具有广泛的应用。

    jquery表格树插件

    **jQuery表格树插件详解** ...综上所述,`jQuery表格树插件`是实现网页中表格数据树形展示的有力工具,通过其丰富的功能和易用的API,能够帮助开发者快速构建具有交互性和良好用户体验的表格应用。

Global site tag (gtag.js) - Google Analytics