在操作表格前后端交互式时,总会遇到将所要操作的行的信息传至后台进行数据库更新的操作,本文适用于标准的html页面和js库,并提出了三种操作方式根据实际情况进行选择

1.表格格式如图所示

2.表格代码如图所示

<c:forEach items="${users}" var="user">
  <tr>
    <td id="">${user.createTime}</td>
    <td id="userName">${user.userName}</td>
    <td id="">${user.role}</td>
    <td id="">${user.phone}</td>
    <td id="">${user.groupId}</td>
    <td id="">${user.groupRole}</td>
    <td id="">${user.lastUpdate}</td>
    <td>
      <button id="edit" class="layui-btn layui-btn-small">
        <i class="layui-icon"></i>
      </button>
      <button id="delete" class="layui-btn layui-btn-small">
        <i class="layui-icon"></i>
      </button>
    </td>
  </tr>
</c:forEach>

3.获取电机按钮指定列的值代码如下

 $('#delete').on('click', function() {
      //第一种方式按照index进行值的获取,个人不推荐
      //var userName = $(this).parents("tr").children("td:nth-child(2)").text();
      //第二种方式按照id获取值,推荐
      var userName = $(this).parents("tr").find("#userName").text();
      //第三种方式按照class获取值
      //var userName = $(this).parents("tr").find(".userName").text();
});

4.需要注意的是需要引入jquery.js库

<script src=".../jquery.min.js?t=1484026799191" charset="utf-8"></script>

5.效果图如下

前端:JS获取单击按钮单元格所在行的信息的更多相关文章

  1. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

  2. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  3. 获取Excel的单元格数据类型(靠谱)

    VBA中,单元格属性有NumberFormat可以获取单元格格式,比如: G/通式格式→常规 @→文本 yyyy/m/d→日期 问题: G/通式格式,无法知道值是整数还是浮点数, yyyy/m/d如果 ...

  4. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  5. winform的datagridview单元格输入限制和右键单击datagridview单元格焦点跟着改变

    在datagridview的EditingControlShowing事件里面添加代码: if (this.dgv_pch.Columns[dgv_pch.CurrentCell.ColumnInde ...

  6. Datatables js 复杂表头 合并单元格

    x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...

  7. Aspose.cell C# 操作excel(通过批注信息给单元格赋值、批注信息获取公式得出结果并转PNG)

    if (fileName == "") return ""; var CurrentRow = 0; Workbook work = new Workbook( ...

  8. Office EXCEL 如何保留一位小数,并且单击这个单元格的时候没有一大串小数

    左侧有一列数据,即便我设置单元格格式,把小数位数设为1,看上去的确四舍五入,保留一位小数了,但是实际上我鼠标双击任意单元格,还是原来的数值,这样的数据如果是要发给别人的,肯定不好   如果进行选择性粘 ...

  9. Excel表格中单击一个单元格如何将整行整列变色

    视图->阅读模式 开启阅读模式后 就会显示如下情景,是的你点击任意单元格后,显示整行/整列

随机推荐

  1. linux内核的冒险md来源释义# 14raid5非条块读

    linux内核的冒险md来源释义# 14raid5非条块读 转载请注明出处:http://blog.csdn.net/liumangxiong 假设是非条块内读.那么就至少涉及到两个条块的读,这就须要 ...

  2. Asterisk 未来之路3.0_0005

    原文:Asterisk 未来之路3.0_0005 第二章: Asterisk的架构   Asterisk 和其他众多传统的PBX是有区别的,拨号方案针对各种通道处理本质上采用同一种方式. 在传统的PB ...

  3. 02.零成本实现WEB性能测试-基于APACHE JMETER

    书评: 1.这本是介绍性能测试工具Jmeter的书籍,维度还够,但是粒度太粗. 2.对于想快速了解JMeter的使用和工具的原件使用,还是有一定的参考价值. 3.实际上,这本书可用来快速入门,掌握和了 ...

  4. [置顶] Vector ArrayList区别剖析

    Java中Vector与ArrayList的区别?这是一个很常见的面试题目:) Vector与ArrayList其实是非常相似的,不信,你可以看看源码,如果说真的有什么区别的话,大概有以下三点: 1: ...

  5. NhibernateProfiler-写个自动破解工具(源码)

    04 2013 档案   [屌丝的逆袭系列]是个人都能破解之终结NhibernateProfiler-写个自动破解工具(源码) 摘要: 破解思路分析及手动破解 增加“附加到进程”功能--功能介绍增加“ ...

  6. dpkg: error processing mysql-server (--configure): dependency problems - leaving unconfigured

    dpkg: error processing mysql-server (--configure): dependency problems - leaving unconfigured start: ...

  7. 在MVC中使用SignalR

    在MVC中使用SignalR 接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET Si ...

  8. 同源策略与JSONP

    [CORS:跨域资源共享] 同源策略与JSONP Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分.“同源策略”限制了J ...

  9. IOS开发小功能2:二维码扫描界面的设计(横线上下移动)

    效果图如上,实现的是一个二维码扫描界面. 下面我贴出线条上下移动的代码,至于二维码的代码是用的第三方库. 首先是整体的结构: 注意下面的库文件一个都不能少,否则会报错. TLTiltHighlight ...

  10. c语言:最长对称子串(3种解决方案)

    问题描述: 输入一个字符串,输出该字符串中最大对称子串的长度.例如输入字符串:“avvbeeb”,该字符串中最长的子字符串是“beeb”,长度为4,因而输出为4. 解决方法:中序遍历 一,全遍历的方法 ...