开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何显示onclick事件中的列和行中的数据

在onclick事件中显示列和行中的数据，可以通过以下步骤实现：

首先，确保你已经有一个包含数据的表格或其他数据结构。表格通常由行和列组成，每个单元格包含一个数据项。
在HTML中，为需要触发onclick事件的元素添加一个唯一的id或class属性。例如，可以给表格的每个单元格添加一个class属性，以便在点击时触发事件。
在JavaScript中，使用document.getElementById()或document.getElementsByClassName()等方法获取到需要触发事件的元素。
使用addEventListener()方法将onclick事件绑定到获取到的元素上。在事件处理程序中，可以通过this关键字引用当前被点击的元素。
在事件处理程序中，可以使用DOM操作方法（如parentNode、previousSibling、nextSibling等）来获取到所在行和列的其他元素。
通过获取到的行和列元素，可以进一步获取到其中的数据。可以使用innerHTML属性获取到元素的文本内容，或者使用getAttribute()方法获取到元素的自定义属性。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>显示行和列中的数据</title>
</head>
<body>
  <table>
    <tr>
      <td class="cell">数据1</td>
      <td class="cell">数据2</td>
    </tr>
    <tr>
      <td class="cell">数据3</td>
      <td class="cell">数据4</td>
    </tr>
  </table>

  <script>
    // 获取所有具有class为"cell"的元素
    var cells = document.getElementsByClassName("cell");

    // 给每个单元格添加onclick事件
    for (var i = 0; i < cells.length; i++) {
      cells[i].addEventListener("click", function() {
        // 获取所在行和列的其他元素
        var row = this.parentNode;
        var column = this;

        // 获取行和列的索引
        var rowIndex = Array.prototype.indexOf.call(row.parentNode.children, row);
        var columnIndex = Array.prototype.indexOf.call(row.children, column);

        // 获取行和列中的数据
        var rowData = row.cells[columnIndex].innerHTML;
        var columnData = column.innerHTML;

        // 在控制台输出数据
        console.log("所在行的数据：" + rowData);
        console.log("所在列的数据：" + columnData);
      });
    }
  </script>
</body>
</html>

在上述示例中，我们使用了一个表格来展示数据。每个单元格都有一个class为"cell"，并且绑定了onclick事件。当单元格被点击时，事件处理程序会获取到所在行和列的其他元素，并输出行和列中的数据。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行适当的修改和扩展。

相关搜索:在React onclick中添加列和行如何使用react中的onclick事件和按钮来切换分区的显示？检测onTouchListener中的onLongPress和onClick事件 js中的onclick事件 JQuery突出显示表格中的行和列 chrome扩展显示div元素中的v2和onclick事件 Dart Web中的onClick事件如何停止html属性中onclick事件的事件传播？颤动中的列和行如何在以下代码中显示行和列的索引反转数据帧中的列和行如何比较R中的列和行中的值？使用css和js在html中显示带有onClick事件的隐藏内容 Chrome,Opera和IE(javascript)中的右击事件(onclick)如何获取行onClick中的<td>值突出显示表中的列和行::after和：：work work pandas中相同列中的行和从react js中的onClick事件获取对象数据和目标元素如何处理条件组件中的onClick事件如何在BootstrapDropDown的项中添加onclick事件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

GridView删除事件

RowDeleting和RowDeleted事件 RowDeleting发生在删除数据之前，RowDeleted发生在删除数据之后。使用RowDeleting事件，可以在真正删除前再次确认是否删除，可以通过设置GridViewDeleteEventArgs.Cancel=True来取消删除；也可以用于判断当前数据库记录数，如果只剩一条记录且数据库不能为空则提示并取消删除操作。使用RowDeleted事件，可以在删除后，通过GridViewDeletedEventArgs的Exception属性判断删除过程中是否产生异常，如无异常，则可以显示类似于” 1 Records deleted” 之类的提示信息。

02

点击块，让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式，它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式，可以回复“标签”到微信公众号。今天我们要来学习简单的页面交互效果 - 点击块，让块运动起来。本文内容概要 1 获取标签 2 绑定事件 3 设置样式 4 代码的封装与优化 5 课程小结 6 课程练习 1 获取标签回顾一下前面学过的知识，如何获取网页中的标签？我们是通过给网页中的标签取一个id名（id名不能重复），再利用getElementById('id名')

ASP.NET2.0中用Gridview控件操作数据

在ASP.NET 2.0中，加入了许多新的功能和控件，相比asp.net 1.0/1.1，在各方面都有了很大的提高。其中，在数据控件方面，增加了不少控件，其中的Gridview控件功能十分强大。在本文中，将探讨Gridview控件中的一些功能特性和用法，如果各位读者对Gridview控件不大了解，可以通过《使用ASP.NET 2.0中的Gridview控件》一文，来对Gridview控件有个初步的认识。

01

jQuery源码解析之trigger()

一、$().trigger()和$().triggerHandler() 的作用和区别

02

【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据

----------------更新：2014-04-21---------------

02

从编程小白到全栈开发：了解事件机制

在上一篇文章中，我们初步了解了在HTML中处理用户操作的知识，最主要的，就是如何对指定的DOM元素添加事件监听以获取用户操作，并进行后续的处理。这里所使用到的这种基于事件的处理方式，其本质是一种消息传递机制，我们称之为事件机制。

04

进阶必备-Android Click事件是怎么触发的？

阅读本篇文章前，假设你已经阅读前一篇文章上一篇链接。由于有同学问到onClick和touch事件的关系，这里就从源码的角度分析下onClick和onLongClick与onTouchEvent事件是怎么关联的。本文将通过View.java、TextView.java、Button.java的源码作为例子分析。

02

页面性能优化的利器 — Timeline

本文介绍了如何定位和分析Web性能问题中的重绘（Repaint）问题，通过介绍和实例分析，提供了在Timeline中查看和定位重绘问题的方法，以及通过Paint Profiler分析绘制细节，从而优化页面性能。

03

大佬，怎么办？升级React17，Toast组件不能用了

今天，我们来追查一个棘手的React bug，知名组件库material-ui就受其影响。

02

HTML中传递和引用JavaScript变量

http://ivantian2008.blog.51cto.com/622133/1127456

06

Android UI学习之---Button

Button的作用就是按下，当然当按下后就会产生“按下”的事件。其中按下的事件也分为两种。一种是OnClick事件，另一种是OnLongClick事件。

02

Salesforce LWC学习(四十六) 自定义Datatable实现cell onclick功能

本篇参考：https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable

00

JQuery 对控件的事件操作

JQuery是非常棒的js类库，有丰富的UI库和插件，不过我钟爱他的是他的选择器，感觉其他功能有时跟后台人员距离很远，所以一般我也只使用一下他的选择器。今天突然对他的事件产生了兴趣，先前也碰到过，也没整理，今天有空就弄一下咯。对于控件的事件，jQuery已经提供了丰富的方法，包括绑定、一次绑定、触发等，阿拉今早看看叫一哪能用额伐，大虾路古就可以了。 jQuery的绑定事件非常方便，有bind、live、one还有它帮你把一些常用的事件给单独了出来，比如控件的onclick事件，我们绑定onclick事件

06

文档和元素的几何滚动

当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

00

iframe编程的一些问题

前几天做一个用iframe显示曲线图的demo，发现对iframe的contentDocument绑定 onclick事件都无效，而在页面中对iframe.contentDocument的onclick 属性为undefined；而当iframe去掉src属性后，在对其绑定onclick事件，该事件生效；对比之下才发现原来当对iframe.contentDocument绑定事件时，iframe还没有加载完毕，此时对于contentDocument虽然可以绑定该事件处理函数，但是却无法执行，因为此时co

06

【web必知必会】—— 使用DOM完成属性填充

本文介绍了使用DOM的简单方法实现动态加载图片的功能。前文介绍了： 1 DOM四个常用的方法　　首先看一下效果，初始时是一个相册，可以点击导航，切换图片，并切换下方显示内容：

09

stack overflow at line 9[通俗易懂]

1. 起初认为可能是文本框的字符限制原因，有默认长度，故加上maxlength=128足够长，结果问题还是存在。

01

ASP.ENT调用JS jquery

在asp中的OnClick和在Html里的OnClick是不一样的，前者是ASP中的，所以点击触发的是服务器事件，后者是客服端事件，当然在ASP中也有客户端的，OnClientClick事件，它在编译后就是HTML里的OnClicK事件。

01

Javaweb-案例练习-5-商品数量修改和合计金额实现

前面一篇完成了添加购物的功能，这篇来完善购物车页面上，修改商品数量和小计这两处地方的代码。

02

HTML中实现右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。

03

Javaweb-案例练习-5-商品数量修改和合计金额实现

前面一篇完成了添加购物的功能，这篇来完善购物车页面上，修改商品数量和小计这两处地方的代码。

03

Python爬虫基础：常用HTML标签和Javascript入门

大部分HTML标签是闭合的，由开始标签和结束标签构成，二者之间是要显示的内容，例如：<title>网页标题</title>。也有的HTML标签是没有结束标签的，例如：
和

01

关于DOM的理解

当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。

03

WPF是什么_wpf documentviewer

项目中要用到一个数据分页栏，虽然自己没有实现过，但凭经验感觉它和ListBox/ListView有关。于是去网上搜了下WPF 数据分页栏，果然很多实现都用到了ListView。于是拣了一种比较简单的实现学习，其中包含下面代码：

02

面试官：考你几个简单的事件问题吧

事件处理是JavaScript中非常重要的概念，我们使用的客户端软件往往都是事件驱动的，所以面试官特别喜欢问一些事件相关的知识，这里记录几个常见的问题，供大家学习。

03

.NET简谈路由事件

什么叫路由事件，字面理解就是事件是可以传递，路由的意思也好理解。路由事件其实就是，事件是会随着某种变化，来回传递。路由事件其实在.NET2.0时期就已经存在了，只不过在一般开发过程中用不到。

01

Extjs-lesson4

Ext.js 系列课程笔记「表单子项」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

01

DataGridView的DataGridViewComboBoxColumn列点击一次，自动处于编辑状态

本文转载：http://www.cnblogs.com/Johnny_Z/archive/2012/02/12/2348235.html

01

C# 可视化程序设计机试知识点汇总，DBhelper类代码

打开窗体 HotelType ht = new HotelType(); ht.Show();//非模式窗体 ht.ShowDialog();//模式窗体在父窗体中打开子窗体 HotelType ht = new HotelType(); ht.MdiParent = this; ht.Show();//非模式窗体 ht.ShowDialog();//模式窗体退出系统 Application.Exit(); 清空文本框两种方式 this.TextBox.clear(); t

02

如何在React中优雅的处理doubleClick

上午楼主遇到一个需要处理双击事件的需求，在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法，顺便分享给大家。

04

从编程小白到全栈开发：响应用户的操作

咳嗽连续咳了一个多月，蓝瘦，我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了，我才提起一口气，嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

04

浅谈JavaScript的事件（事件处理程序）

事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序元素支持的事件，都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。例如，在单击按钮的时候执行一些JavaScript代码。 <div id="aa" onclic

05

JavaScript|制作网页随机验证码

网站为了防止用户利用机器人自动注册、登陆和灌水，都会采用验证码技术。验证码技术其实就是把一串随机的数字生成图片，在图片中添加一些干扰元素，用户采用肉眼识别输入验证码，给后台提交数据完成验证。接下来就来讲解一下如何利用JavaScript制作网页随机验证码。

03

jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

我有一个水货的上司，大家都是知道的。所以我就只能自学了，今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话，短信，浏览器，音乐的标签菜单。好吧，直接上代码：

04

onclick与addEventListener区别

这次做项目遇到了这个问题，本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候，引发了我的思考，这两者有区别吗？具体的事件分析可查看另一篇文章

01

JavaScript学习（二）

数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。

01

google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS)，可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段（统称为“代码”）。将一小段跟踪代码管理器代码添加到项目后，您可以通过网页界面安全轻松地部署 Google Analytics（分析）和衡量代码配置。

01

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,HTML5开发越来越收到欢迎。于是各种HTML5的框架都出来了。由于对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。并颇有心得，再这里和大家一起分享一下。好了，我们之间上代码：

03

EXT按钮事件

在EXT中，当我们要为按钮点击添加处理function的时候，可以看到一般人的实现分成2类：

03

Yii2 学习笔记之 GridView DetailView

在 GridView 小部件是从数据提供者获取数据，并以一个表格的形式呈现数据。表中的每一行代表一个单独的数据项，列表示该项目的属性。在 DataGrid 小部件中的列是在 yii\grid\Col

06

低代码平台前端的设计与实现（三）设计态画布DesignCanvas的设计与实现

上一篇文章，我们分析并设计了关于构建引擎BuildEngine的切面设计。本文我们将基于BuildEngine所提供的切面处理能力，在CustomCreateElementHandle中通过一些逻辑，来完成一个轻量级的设计器画布。

03

android view事件分发机制

首先我们先写个简单的例子来测试View的事件转发的流程~ 1、案例为了更好的研究View的事件转发，我们自定以一个MyButton继承Button，然后把跟事件传播有关的方法进行复写，然后添加上日志~ MyButton package com.example.zhy_event03; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import andr

06

事件绑定的几种常见方式

在项目开发中，经常遇到绑定事件不起作用，或者事件绑定多次，导致重复触发。 1.事件绑定的几种常见方式（以click事件为例） jquery: $(selector).click(function(){...}) $(selector).bind("click",function(){...}) $(selector).live("click",function(){...}) $(document).delegate("selector","click",function(){...}) $(sel

08

.Net 转战 Android 4.4 日常笔记（8）--常见事件响应及实现方式

在Andrioid开发中，常见的事件如下单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyListenner 焦点事件 setOnFoucsChangeListener 设置方式 1.动态设置（最常用的方式） Button btn = (Button) findViewById(R.id.btnTest); btn.setOnClickListener(new View.OnClic

05

1、深入浅出React（一）

npm start启动开发环境，npm run build创建生产环境优化代码，npm test用于测试单元，npm run eject把潜藏在react-scripts中的一序列技术栈“弹射”到应用的顶端，此命令不可逆且会改变和增加一些文件。

01

js事件委托的理解转

http://www.cnblogs.com/liugang-vip/p/5616484.html 这篇文章写的很详细，非常感谢作者。

02

Button和ImageButton[通俗易懂]

通过他们自身的.setOnClickListener(OnclickListener)方法加入点击事件。

06

Excel编程周末速成班第21课：一个用户窗体示例

引言：这是在知识星球App的完美Excel社群中发表的Excel VBA编程系列文章中的一篇，使用一个示例来讲解用户窗体的基础应用。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭