bootstap table表格, 获取当前点击的table元素在该行是第几个

背景

有这样一个需求, table表格中是统计数据, 要求点击每个单元格可实现导出统计的底层数据

数据都是可点击导出的, 

思路

获取行bootstap 有个index参数, 所哟要获取当前行第几列, 要获取当前点击的table元素在其所在行中的位置(即第几个),你可以使用JavaScript的事件对象和DOM API来实现。以下是一个简单的方法:

// 获取当前点击的table元素
var clickedCell = event.target;// 获取当前行的所有单元格
var cells = clickedCell.parentNode.getElementsByTagName('td');// 计算当前点击的单元格在其所在行中的位置
var cellIndex = Array.prototype.indexOf.call(cells, clickedCell);// 输出位置信息
console.log('当前点击的单元格在其所在行中的位置是:第' + (cellIndex + 1) + '个');

在这个方法中,我们首先通过事件对象获取当前点击的table元素。然后,我们使用getElementsByTagName方法获取当前行的所有单元格,并使用Array.prototype.indexOf.call方法计算当前点击的单元格在其所在行中的位置。最后,我们输出位置信息。请注意,这里假设单元格的索引是从0开始的,因此我们需要在结果上加1来得到从1开始的索引。

PS: 该方式用于获取行/列位置都可以的, 并不局限于bootstap表格

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/232965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM 垃圾回收详解

前言 什么是垃圾? 垃圾是指运行程序中没有任何引用指向的对象,需要被回收。 内存溢出和内存泄漏 内存溢出:经过垃圾回收之后,内存仍旧无法存储新创建的对象,内存不够溢出。 内存泄漏:又叫“存储泄漏”&#xff0…

【docker】修改docker的数据目录

背景 主节点是分配了较少内存和存储的低配机器,因为我们系统的rancher是用docker镜像启动的,而rancher和docker的默认目录都放在/var/lib下面,而这个/var目录目前只分配10G的存储,导致节点存储报警。因此想修改docker的数据目录&…

idea添加外部jar包

在日常开发中在lib包的里面添加了外部的jar,如何将外部的包添加到java类库中,这样项目就可以引用相应的jar包,操作如下: 1.先将需要的jar复制到lib包如下,如下截图,图标前面没有箭头,表示还未添…

正则化实战( Lasso 套索回归,Ridge 岭回归)

Lasso 套索回归 导入包 import numpy as np from sklearn.linear_model import Lasso from sklearn.linear_model import SGDRegressor, LinearRegression原方程的计算结果 # 1. 创建数据集X,y X 2 * np.random.rand(100, 20) w np.random.rand(20, 1) b np.r…

C# 实时存储16进制数据,写入文件格式为Raw

1.示例代码 private void button1_Click(object sender, EventArgs e){byte[] data { 0x21, 0x22, 0x23, 0x24, 0x25, 0x26, 0x27, 0x28 }; //模拟要写入的数组List<byte[]> listBytes new List<byte[]>();listBytes.Add(data); //数组转集合RecData(listBytes);…

租赁系统|租赁小程序开发|北京租赁系统提升行业发展

租赁小程序定制功能是为了满足特定租赁服务的个性化需求而开发的一套功能模块。通过定制化开发&#xff0c;我们能够根据您的业务模式和需求&#xff0c;量身打造出适合您的租赁小程序。无论您是汽车租赁、房屋租赁、设备租赁或其他租赁服务&#xff0c;我们都能够为您提供定制…

财务知识之存货、固定资产、无形资产

存货、固定资产、无形资产在会计中常被称作“资产三兄弟”&#xff0c;原因是他们有很多相似的地方。 一、定义 名称准则定义存货存货&#xff0c;是指企业在日常活动中持有以备出售的产成品或商品、处在生产过程中的在产品、在生产过程或提供劳务过程中耗用的材料和物料等。…

phy 业务测试场景总结

1,光模块 模块类型 (1) 100BASE-X (2) 1000BASE-FX 千兆模块应用场景: a,应用 100BASE-X,1百兆组网使用的光模块。 b,应用 1000BASE-FX,千兆光模块降速率使用和不降速率的使用。 2,电模块 (1) 100M (2) 10/100M自适应 (3) 1000M(1.25G) (4) 10/100/1000M自适应

css的filter全属性介绍

原图&#xff1a; 模糊&#xff08;blur&#xff09; 单位可为px或rem&#xff0c;值越大&#xff0c;越模糊 filter:blur(3px) filter:blur(0.3rem) 亮度(brightness) 值可为数字或百分数&#xff0c;小于1时&#xff0c;亮度更暗&#xff1b;等于1时&#xff0c;无变化&am…

Verilog 字符串

文章目录 字符串简介字符串声明字符串操作输出字符画 字符串简介 一个字符串是由双引号"括起来并包含在一行中的字符序列。 在表达式和赋值语句中&#xff0c;用作操作数的字符串被视为由8bit ASCII码值表示的无符号整数常量。 字符串声明 字符串变量是wire/reg类型的变…

部署LVS的NAT模式

实验准备 #负载调度器# 192.168.116.40 #内网 12.0.0.100 #外网 先添加双网卡 #web服务器# 192.168.116.20 #web1 192.168.116.30 #web2 #nfs共享服务# 192.168.116.10 #nfs systemctl stop firewalld setenforce 0 1.nfs共享文件 1…

gitee(ssh)同步本地

一、什么是码云 gitee Git的”廉价平替” > 服务器在国内&#xff0c;运行不费劲 在国内也形成了一定的规模 git上的一些项目插件等在码云上也可以找得到 二、创建仓库 三、删除仓库 四、仓库与本地同步 > 建立公钥 五、把仓库同步到本地 六、在本地仓库中创建vue项目…

C++设计模式之——命令模式

命令模式 概念创建步骤示例示例一代码实现运行结果 示例二代码实现运行结果 示例三示例代码运行结果 示例四代码实现运行结果 应用场景 概念 命令模式是一种行为型设计模式&#xff0c;它允许将请求封装为一个对象&#xff0c;从而使得可以参数化客户端请求、将请求排队或者记…

libp2p 快速开始

文章目录 第一部分&#xff1a;libp2p 快速入门一、什么是libp2plibp2p 发展历程libp2p的特性p2p 网络和我们熟悉的 client/server 网络的区别&#xff1a; 二、Libp2p的实现目标三、Libp2p的用途四、运行 Libp2p 协议流程libp2p 分为三层libp2p 还有一个局域网节点发现协议 mD…

原生JS实现组件切换(不刷新页面)

这是通过原生Es6实现的组件切换&#xff0c;代码很简单&#xff0c;原理和各种框架原理大致相同。 创建文件 ├── component&#xff1a;存放组件 │ ├── home1.js&#xff1a;组件1 │ ├── home2.js&#xff1a;组件2 ├── index.html ├── index.js初始化ht…

LLaMA系列模型

1.LLama 1.1 简介 Open and Efficient Foundation Language Models (Open但没完全Open的LLaMA) 2023年2月&#xff0c;Meta&#xff08;原Facebook&#xff09;推出了LLaMA大模型&#xff0c;使用了1.4T token进行训练&#xff0c;虽然最大模型只有65B&#xff0c;但在相关评…

[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians

[paper | proj] 给定FLAME&#xff0c;基于每个三角面片中心初始化一个3D Gaussian&#xff08;3DGS&#xff09;&#xff1b;当FLAME mesh被驱动时&#xff0c;3DGS根据它的父亲三角面片&#xff0c;做平移、旋转和缩放变化&#xff1b;3DGS可以视作mesh上的辐射场&#xff1…

「Vue3面试系列」Vue3.0的设计目标是什么?做了哪些优化?

文章目录 一、设计目标1.1 更小1.2 更快1.3更友好 二、优化方案2.1 源码2.11源码管理2.22 TypeScript 2.2 性能2.3 语法 API2.31逻辑组织2.32 逻辑复用 参考文献 一、设计目标 不以解决实际业务痛点的更新都是耍流氓&#xff0c;下面我们来列举一下Vue3之前我们或许会面临的问…

校园转转二手市场源码+Java二手交易市场整站源码

源码介绍 校园转转二手市场源码分享&#xff0c;Java写的应用&#xff0c;mybatis-plus 和 Hibernate随心用 后台地址&#xff1a;/home/index/index 账号密码&#xff1a;admin/123456 前台地址&#xff1a;/system/login

计算机网络2

OSI参考模型七层&#xff1a; 1.应用层 2.表示层 3.会话层 4.传输层 5.网络层 6.数据链路层 7.物理层 TCP/IP模型 5层参考模型