`

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获取table指定行和列的数据方法(当前选中行、列)

    下面小编就为大家带来一篇jquery获取table指定行和列的数据方法(当前选中行、列)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery表格键盘操作插件 jquery KeyTable调用示例.rar

    jQuery表格键盘操作插件 jquery KeyTable调用示例,这款插件允许用户在表格移动/选择数据像键盘操作Excel那样,不依赖鼠标就可完成各项操作.并且高亮当前操作的表格单元格.运行效果请参见截图,本源码包内含有调用本...

    jquery删除table当前行的实例代码

    jQuery删除当前行,只需传this,即可: &lt;/pre&gt;&lt;p&gt;&lt;tr&gt;&lt;td&gt;&lt;input type='hidden' name='annex' value="+rs+"&gt; [removed]void(0);'&gt;"+rs+"  删除&lt;/span&gt;&lt;/td&gt;  &lt;pre code_snippet_id="1684775" snippet_...

    Layui数据表格之获取表格中所有的数据方法

    这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。 1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。 2、将上一步创建的JS对象数组也就是原始...

    Jquery插件-table

    * getJSONData - 获取当前数据JSNO格式 功能 * getArrayData- 获取当前数据Array格式 功能 * getStringData- 获取当前数据String格式 功能 ====&gt;效果事件 * edit - 表格可编辑 ...

    超实用的jQuery代码段

    11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句写法 11.19 如何构建最优化的字符串 ...

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下

    JQuery 动态生成DIV、Table并处理数据,DWR与后台交互

    // 绑定高度并获得当前隐藏keys(获得当前事件的下一个元素) /** * 显示状态和模块 */ /** * 隐藏状态和模块 */ /** * 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 ...

    jquery电子文档chm

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时...

    jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本...

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    jquery插件treegrid树状表格的使用方法详解(.Net平台)

    jquery.min.js+jquery.treegrid.min.js 二、后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: @using Model @{ Layout = null; UserInfo userInfo = ...

    用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

    下面是js Code: 代码如下: $(function() { // 相当于在页面中的body标签加上onload事件 $(“.caname”).click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this);... // 当前td的内容变为

    treeGrid、树形表格

    取得当前行的数据" onclick="selectedItem()"&gt; 当前选中的行: &lt;div id="div1"&gt;&lt;/div&gt; var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight...

    Asp.Net无刷新分页( jquery.pagination.js)

    //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变) $("#Result").append(data); //将返回的数据追加到表格 } }); } }); &lt;h1&gt;Posrchev----无刷新分页 &lt;div id="container"&gt; ...

    ligerui-LigerRM-V2

    除了基本的 (用户角色) =&gt; (模块功能) 这类的功能权限控制,还在数据请求入口做了一点小动作,根据【当前的用户信息】和【配置好的数据权限规则】筛选过滤数据。 5,自动的搜索框、自动的表单。 表单和搜索框不再...

    JS数据表格分页控件 1.0

    在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...

    使用jQuery 操作table 完成单元格合并的实例

    比较表格的内容。判断是否合并单元格: tr = $("#printPage tr")...//判断 若只有一行数据,则不做调整 if(tr &lt;= 2){ }else{ //var i=1 比较当前的tr和上一个tr的值 for(var i=0;i &lt; tr ;i++){ var ford = $("#

    JavaScript基础教程第8版

    13.5 从服务器获得数据 267 13.6 用Ajax预览链接 270 13.7 自动补全表单字段 273 第14章 工具包、框架和库 279 14.1 添加jQuery 280 14.2 使用jQuery更新页面 282 14.3 使用jQuery交互 282 14.4 ...

Global site tag (gtag.js) - Google Analytics