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.hqwc.cn/news/286986.html

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

相关文章

20、WEB攻防——PHP特性缺陷对比函数CTF考点CMS审计实例

文章目录 一、PHP常用过滤函数:1.1 与1.2 md51.3 intval1.4 strpos1.5 in_array1.6 preg_match1.7 str_replace CTFshow演示三、参考资料 一、PHP常用过滤函数: 1.1 与 :弱类型对比(不考虑数据类型),甚至…

【程序】STM32 读取光栅_编码器_光栅传感器_7针OLED

文章目录 源代码工程编码器基础程序参考资料 源代码工程 源代码工程打开获取: http://dt2.8tupian.net/2/28880a55b6666.pg3这里做了四倍细分,在屏幕上显示 速度、路程、方向。 接线方法: 单片机--------------串口模块 单片机的5V-------…

饥荒Mod 开发(十七):手动保存和加载,无限重生

饥荒Mod 开发(十六):五格装备栏 饥荒游戏会自动保存,本来是一个好的机制,但是当角色死亡的时候存档会被删除,又要从头开始,有可能一不小心玩了很久的档就直接给整没了,又或者是打怪没爆好东西, …

Gin之GORM的表关联查询操作详解

前期工作: 先查看下要操作的两张表: carton carton_cate //关系如下: // 一个章节对应一个动漫(一对一;两种方法:belong to;has one) // 一个动漫可以对应多个章节(一…

七:爬虫-数据解析之正则表达式

七:正则表达式概述 正则表达式,又称规则表达式,(Regular Expression,在代码中常简写为regex、regexp或RE),是一种文本模式,包括普通字符(例如,a 到 z 之间的字母&#xf…

C++刷题 -- KMP算法

C刷题 – KMP算法 文章目录 C刷题 -- KMP算法1.算法讲解2.算法实现 https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/description/ 1.算法讲解 KMP算法是一种字符串匹配算法,当出现字符串不匹配时,可以记录一部分之…

求奇数的和 C语言xdoj147

题目描述:计算给定一组整数中奇数的和,直到遇到0时结束。 输入格式:共一行,输入一组整数,以空格分隔 输出格式:输出一个整数 示例: 输入:1 2 3 4 5 0 6 7 输出:9 #inclu…

线上环境如何正确配置 Django 的 DEBUG?

Author:rab Django Version:3.2 Python Version:3.9 目录 前言一、DEBUG True二、DEBUG False三、页面异常解决总结 前言 由于最近在学习 Django 的知识,于是尝试开发了一套 Blog 系统,在本地测试时是页面显示没问题…

Ubuntu安装ARM交叉编译器

Ubuntu安装交叉编译器 更新apt # 更新apt sudo apt update安装gcc sudo apt install build-essential查看gcc版本 gcc -v下载交叉编译工具 复制到用户目录 解压 tar -xvf gcc-linaro-5.5.0-2017.10-x86_64_arm-linux-gnueabihf.tar.xz移动到/opt/下 sudo ./gcc-linaro-5.…

Java项目-瑞吉外卖项目优化Day1

创建新仓库 push项目 新建分支v1.0做优化 导入Redis相关配置 导入坐标。 实现配置类,重写序列化器,也可以直接用StringRedisTemplate。 application.xml配置: 实现缓存短信验证码 将手机号与验证码存进redis。 从redis中获取验证码&…

JMESPath语言

JMESPath(JSON Matching Expression Path) 一种查询语言。 主要用于从JSON文档中检索和过滤数据。 通过写表达式提取和处理JSON数据,而无需编写复杂的代码。 功能:数据提取、过滤、转换、排序。 场景:处理API响应…

手撕分布式缓存---HTTP Client搭建

经过上个章节的学习,我们已经实现了一致性哈希算法,这个算法保证我们可以在节点发生变动时,最少的key请求受到影响,并返回这个节点的名称;这很大程度上避免了哈希雪崩和哈希穿透的问题。这个章节我们要基于此实现完整的…