通过点击某一行的按钮获取当前行的数据

最新推荐文章于 2024-04-26 22:44:17 发布
原创 最新推荐文章于 2024-04-26 22:44:17 发布 · 6.9k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用JavaScript在表格中实现单元格编辑的方法。通过在修改按钮上设置onclick事件，调用edit函数获取指定单元格的数据。具体实现中，利用jQuery选择器定位到目标单元格并读取其内容。

 

在 修改按钮 上设置 onclick="edit(this)"

function edit(this1){

var value = $(this1).parent().parent().find("td");

console.log(value.eq(1).text());   //15900012520  得到第二列的数据

}

SAP UI5 表格行项目内的按钮点击之后，如何获得当前所在的表格行项目的数据
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-17 1063
我的 SAP UI5 教程这篇文章 下面，有个朋友留言咨询一个问题：本文专门解答。首先我们得在 Table 行项目里构造一个按钮出来。重用我教程里步骤 33：SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness) 的源代码。做出如下修改：因为我这个例子，使用本地 SAP UI5 应用消费一个远端的 OData 服务，因此会遇到跨域错误(CORS error)，为了临时避开这个问题，使用下面的命令行启动 Chrome，让 Chrome 忽略跨域错误：接着
Repeater中添加按钮实现点击按钮获取某一行数据的方法
09-04
总的来说，通过在Repeater中添加按钮，并结合ItemCommand事件，我们可以轻松地实现点击按钮获取当前行数据的功能。这种方式不仅使得用户界面更加交互友好，也简化了后端代码的编写。对于处理数据库记录的增删改查...
点击按钮对数据进行操作(1)
xiao_hei_1的博客
10-13 711
.skewClass{ transform: skew(50deg); } $(document).ready(function(){ $("button:eq(0)").click(function(){ $("img").removeClass("skewClas
JS获取单击按钮单元格所在行的信息
10-25
主要介绍了用JS获取表格中单击某个单元格中按钮，得到所在行的信息,需要的朋友可以参考下
前端：JS获取单击按钮单元格所在行的信息
weixin_33777877的博客
01-12 1669
在操作表格前后端交互式时，总会遇到将所要操作的行的信息传至后台进行数据库更新的操作，本文适用于标准的html页面和js库，并提出了三种操作方式根据实际情况进行选择 1.表格格式如图所示   2.表格代码如图所示 <c:forEach items="${users}" var="user"> <tr> <td id="">${user.crea..
JS获取表格 按钮所在的行上的元素
公众号：指尖架构师，关注免费获取海量技术资料
05-29 386
JS获取表格 按钮所在的行上的元素 [code="html"] New Document ...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
10-17
在介绍如何使用Vue.js结合Element UI实现点击编辑表格某一行时将内容填入表单的示例之前，首先需要了解几个核心概念： 1. Vue.js：它是一个用于构建用户界面的渐进式JavaScript框架，以数据驱动和组件化的思想设计...
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
12-28
在 v-for 循环语句上，定义一个点击事件 传入两个参数（当行数据、当前事件对象），如下代码片段，当前事件对象必须加上 ‘$’ 符号 (item, key=index click=operate(item,> {{ item.title }} ...
JQuery实现动态表格点击按钮表格增加一行
10-25
` 在第三个单元格中创建了一个按钮，并通过`onclick`属性设置了该按钮的点击事件处理函数为`del`，并将`this`作为参数传入。这样，当按钮被点击时，会触发`del`函数来删除当前行。 - `count++;` 每添加完一行后，...
vue（el-table-column） 点击某一行的按钮，获取当前行的数据
CFL的博客
09-07 9445
【代码】vue（el-table-column） 点击某一行的按钮，获取当前行的数据。
如何获取被点击按钮所在的当前行和类名
iteye_18777的博客
08-07 3297
       有时候当点击页面表格中的按钮时可能需要获取该按钮所在当前行的信息以及给按钮添加点击事件时可能需要获取该按钮的类名，下面就是获取的方法。                                                                                图片1   //给图片1的加减按钮添加点击事件 function addButt...
一进入页面选中第一个按钮，并展示按钮下的数据
习惯有你&的博客
12-12 4307
页面是按钮的排布，一进入页面默认选中第一个按钮，并且展示第一个按钮下的数据，然后点击哪个按钮显示哪个按钮下的数据。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 投标人统计分析 <% // String firstDay=(String)r
bootstrap table中，每一行有一个详细按钮，点击按钮显示该行的具体详细信息。
S852509769的博客
02-18 6993
做法： 由于改行只是粗略的显示一些简单的信息，有些列的信息不会显示在页面上，但是使用row在获取改行的内容的时候，必须要获取该列的内容，所以设置该行的visible：false；然后同过row就可以获取该属性值。 例如： student有id,name,age,userName,password,companyName,Address等信息，但是表格值显示id,name,age,userNa...
点击每一行的某个单元格，获取这一行的数据。
文和的博客
01-12 4339
先看一下业务。 标题上面是业务，点击右边的编辑。在模态框中显示本行的一些信息 接下来看代码 &lt;table class="table table-striped table-bordered table-hover" id="dataTables-example"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="text-...
有一个table表格，选中某一行后，点击“查看(button)”按钮可以实现对该行内容的显示
liushuiziyouliu的专栏
10-09 5033
html> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312"> title>newpagetitle> head> body> table border="1" width="100%">  tr>   td>input type=checkbox>td >  td>11111td
gin-vue-blog自建博客
最新发布
2401_84435700的博客
04-26 513
front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。
通过点击获取到数据回填
weixin_44540452的博客
07-08 646
通过点击获取到数据回填 今天大家分享一个技巧；就是通过某个点击打开数据，选择到数据确认后并回填的一个技巧；先来看下样式： 这里是一个禁用状态的一个input标签；旁边的+ - 号我们分别给了它们一个点击事件； 点击+号就会打开对应数据：如： 这里的打开了一个模态框；然后里面有个数据表格； 当我们选择到其中一条数据后；就会回填到之前禁用的input标签里 点击-号就会清空in...
react（20）——使用函数的柯里化实现获取表单的数据
木子 旭的博客
01-31 304
1.概念 高阶函数：如果一个函数符合下面2个规范中的任何一个，那么该函数就是高阶函数。 一个函数接收的参数是一个函数。 一个函数返回的值是一个函数。 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 2.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login
js通过点击某一行的按钮获取当前行的数据
09-04
在JavaScript中通过点击某一行的按钮获取当前行的数据，一般可通过以下步骤实现： 1. 首先，我们需要在HTML中对每一行的按钮进行事件绑定，可以使用给按钮添加一个唯一的标识id或者class来定位。 2. 使用JavaScript来获取按钮的点击事件，可以使用addEventListener()函数或者直接在HTML中添加onclick事件。 3. 在按钮的点击事件处理函数中，可以通过this关键字来获取当前被点击按钮的引用。 4. 通过当前按钮的引用，可以使用JavaScript的DOM操作方法来获取对应行的其他数据。例如，可以通过parentElement属性找到按钮所在的行元素的引用。 5. 使用JavaScript的DOM操作方法，如getElementById()、querySelector()等来获取该行元素中的其他数据。 6. 最后，将获取到的数据用于需要的操作或者展示。 举个例子，假设每一行都有一个"获取数据"按钮，点击该按钮将获取当前行的数据并将其展示在页面上。 HTML代码如下： ```html <table> <tr> <td>数据1</td> <td>数据2</td> <td><button class="getDataBtn">获取数据</button></td> </tr> <tr> <td>数据3</td> <td>数据4</td> <td><button class="getDataBtn">获取数据</button></td> </tr> <tr> <td>数据5</td> <td>数据6</td> <td><button class="getDataBtn">获取数据</button></td> </tr> </table> ``` JavaScript代码如下： ```javascript const buttons = document.querySelectorAll('.getDataBtn'); buttons.forEach((button) => { button.addEventListener('click', getData); }); function getData() { const row = this.parentElement.parentElement; const data1 = row.cells[0].innerText; const data2 = row.cells[1].innerText; // 做你想要的操作，比如将数据展示在页面上 console.log(data1, data2); } ``` 通过以上代码，当点击某一行的按钮时，会获取到该行对应的数据，并在控制台上打印出来。你可以根据需求修改代码，将获取到的数据用于其他操作或者展示。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值