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

最新推荐文章于 2024-05-16 02:21:58 发布
最新推荐文章于 2024-05-16 02:21:58 发布
阅读量6.5k 收藏 16
点赞数 6
分类专栏： JS JQ HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ja_ho/article/details/104460147
版权
HTML 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
JS
13 篇文章 0 订阅
订阅专栏
JQ
6 篇文章 0 订阅
订阅专栏

 

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

function edit(this1){

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

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

}

Jaho'
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
JS获取单击按钮单元格所在行的信息
01-19
用JS获取表格中单击某个单元格中按钮，得到所在行的信息： 代码如下: function GetRowNo() { var e = e || window.event; var target = e.target || e.srcElement; if (target[removed].tagName.toLowerCase() == “td”) { rowIndex = target[removed][removed].rowIndex; } }
Repeater中添加按钮实现点击按钮获取某一行数据的方法
09-04
总的来说，通过在Repeater中添加按钮，并结合ItemCommand事件，我们可以轻松地实现点击按钮获取当前行数据的功能。这种方式不仅使得用户界面更加交互友好，也简化了后端代码的编写。对于处理数据库记录的增删改查...
vue + Ant Design之table自定义表格、添加操作按钮并获取当前行数据
最新发布
2401_84617431的博客
05-16 467
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JS获取表格 按钮所在的行上的元素
公众号：指尖架构师，关注免费获取海量技术资料
05-29 323
JS获取表格 按钮所在的行上的元素 [code="html"] New Document ...
vue（el-table-column） 点击某一行的按钮，获取当前行的数据
CFL的博客
09-07 6772
【代码】vue（el-table-column） 点击某一行的按钮，获取当前行的数据。
如何获取被点击按钮所在的当前行和类名
iteye_18777的博客
08-07 3153
       有时候当点击页面表格中的按钮时可能需要获取该按钮所在当前行的信息以及给按钮添加点击事件时可能需要获取该按钮的类名，下面就是获取的方法。                                                                                图片1   //给图片1的加减按钮添加点击事件 function addButt...
gin-vue-blog自建博客
2401_84435700的博客
04-26 436
front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
12-28
在 v-for 循环语句上，定义一个点击事件 传入两个参数（当行数据、当前事件对象），如下代码片段，当前事件对象必须加上 ‘$’ 符号 (item, key=index click=operate(item,> {{ item.title }} ...
layui获取选中行数据的实例讲解
10-18
这个方法通过调用`table.checkStatus('idTest')`获取当前表格的选中状态，`data`属性则包含了所有选中的行数据。然后，我们将这些数据转换为JSON字符串并使用`layer.alert`弹出提示框显示。 2. `getCheckLength`...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
在Vue.js和Element UI框架中，实现点击表格某一行进行编辑功能，主要涉及以下几个关键知识点： 1. **Element UI的`el-table`组件**：这是一个强大的表格组件，它支持多种功能，如行选中、排序、自定义列模板等。在...
通过点击获取到数据回填
weixin_44540452的博客
07-08 564
通过点击获取到数据回填 今天大家分享一个技巧；就是通过某个点击打开数据，选择到数据确认后并回填的一个技巧；先来看下样式： 这里是一个禁用状态的一个input标签；旁边的+ - 号我们分别给了它们一个点击事件； 点击+号就会打开对应数据：如： 这里的打开了一个模态框；然后里面有个数据表格； 当我们选择到其中一条数据后；就会回填到之前禁用的input标签里 点击-号就会清空in...
react（20）——使用函数的柯里化实现获取表单的数据
木子 旭的博客
01-31 248
1.概念 高阶函数：如果一个函数符合下面2个规范中的任何一个，那么该函数就是高阶函数。 一个函数接收的参数是一个函数。 一个函数返回的值是一个函数。 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 2.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login
JSP点击表格选中一行，然后点击按钮获取该行数据
zhangyongjie0533的博客
08-17 5041
1.JSP表格代码 <table id="contentTable" class="table table-bordered table-condensed"> <thead><tr class="info"><th style="width:30px;">序号</th><th>员工编号</th><th>员工名称</th><th>性别</th><th>部门名称&
vue 点击某一行的按钮，获取当前行的数据
热门推荐
s1ngle的博客
09-30 1万+
vue + element框架 假如我想从表格中删除第二行，即身份证号为5的数据，那么就需要在点击删除按钮时拿到那一行的信息。 具体代码如下 <el-table-column label="操作" width="140"> <template slot-scope="scope"> <el-button type="danger" icon="el-icon-delete" @click="dele(scope.row)"&gt.
js表格中通过某行按钮获取本行其他数据
谁的博客
07-18 4288
描述 $('.demo').on('click', function(){ var tem = $(this).parents("tr").find(".classId").val(); }); 解释 .demo：表格中某一行的按钮的class .classId：点击的按钮所在行的某个class $(this)：获取所点击的按钮 $(this).parents("tr")：获...
EasyUI table中点击按钮获取当前行数据
jack__love的博客
06-22 1万+
EasyUI中我们经常用到表格，然后要操作当前行的数据，如下图 当点击保存的时候获取当前行数据并显示，如下 参考EasyUI官方文档，代码如下： //点击时精确定位到当前行 $("#tableId").datagrid("selectRow",rowIndex); //获取当前行的数据 var row=$("#tableId").datagrid("getSelecte
table中点击按钮弹出模态框，获取table中点击的按钮所在行的数据
lijiaren_092008的专栏
04-23 7911
最近在弄bootstrap做前端html5页面，其中有用到表格。 表格中有一列数据是按钮增删数据的操作，需要弹出bootstrap的模态框用来操作。 操作的逻辑是向服务端传递id值，所以就需要去获取该行数据id一列的值。 所以就有这个问题，就是再弹出模态框后，获取点击弹出模态框按钮所在的数据。 可以看下table，需要通过点击操作栏，获取到序号列传给服务器操作。 模态框代码 <!-...
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、付费专栏及课程。

余额充值