首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法在动态创建的表单元格中单击按钮

在动态创建的表单元格中无法直接单击按钮的原因是,动态创建的表单元格在页面加载时并不存在,因此无法直接绑定事件。解决这个问题的方法是使用事件委托(Event Delegation)。

事件委托是将事件绑定到父元素上,利用事件冒泡的机制,当事件触发时,通过判断事件源(target)是否是目标元素(按钮),来执行相应的操作。

以下是一个示例代码,演示如何在动态创建的表单元格中单击按钮:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>动态创建表单元格</title>
</head>
<body>
  <table id="myTable">
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </table>

  <script>
    // 获取表格元素
    var table = document.getElementById('myTable');

    // 绑定点击事件到父元素上
    table.addEventListener('click', function(event) {
      // 判断事件源是否是按钮
      if (event.target.tagName === 'BUTTON') {
        // 执行按钮点击后的操作
        console.log('按钮被点击了');
      }
    });

    // 动态创建表单元格
    var newRow = document.createElement('tr');
    var cell1 = document.createElement('td');
    var cell2 = document.createElement('td');
    var cell3 = document.createElement('td');
    var button = document.createElement('button');
    button.textContent = '点击按钮';
    cell1.textContent = '动态单元格1';
    cell2.textContent = '动态单元格2';
    cell3.appendChild(button);
    newRow.appendChild(cell1);
    newRow.appendChild(cell2);
    newRow.appendChild(cell3);
    table.appendChild(newRow);
  </script>
</body>
</html>

在上述代码中,我们首先通过addEventListener方法将点击事件绑定到表格元素上。然后,通过判断事件源的标签名是否为BUTTON,来确定是否是按钮被点击。最后,我们在动态创建的表单元格中添加了一个按钮,并将其添加到相应的单元格中。

这样,无论是静态创建的表单元格还是动态创建的表单元格,都可以通过事件委托的方式来处理按钮的点击事件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 Flutter 中创建可拖动的浮动操作按钮

本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...一个浮动的动作按钮通常可以在点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...所以,我们可以检查内部onPointerUpcallback 仅onPressed在值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮的类。...它有一些参数,包括child(要设置为按钮的小部件)、initialOffset(移动前的初始偏移量)和onPressed(单击按钮时调用的回调)。...key: _key, child: widget.child, ), ), ); } } 输出: 概括 这就是如何在 Flutter 中创建可拖动的浮动操作按钮

5.7K10

Excel小技巧41:在Word中创建对Excel表的动态链接

例如,我们可以在Word中放置一个来自Excel的表,并且可以随着Excel中该表的数据变化而动态更新。...这需要在Word中创建一个对Excel表的动态链接,允许Word文档自动获取Excel表的变化并更新数据。 例如下图1所示的工作表,其中放置了一个Excel表,复制该表。 ?...图3 单击“确定”按钮后,该Excel表中的数据显示在Word文档中,如下图4所示。 ? 图4 此时,你返回到Excel工作表并修改其中的数据,如下图5所示。 ?...但是,当关闭这两个文件后,重新打开Word文档时,会出现如下图7所示的警告信息。如果单击“是”按钮将更新链接数据。 ? 图7 然而,在很多情况下,我们不希望看到这样的警告信息。...图9 这样,每次要更新数据时,在表中单击右键,在快捷菜单中选择“更新链接”即可,如下图10所示。 ? 图10 实际上,当创建对单元格区域的链接后,Word将会存储源数据字段的信息,然后显示链接的数据。

4.1K30
  • c#中在datagridview的表格动态增加一个按钮方法

    c#中在datagridview的表格动态增加一个按钮方法,如果想要这一套教程的可以移步去这里 《期末作业C#实现学生宿舍管理系统》,对了最近我们有一个人工智能交流群,如果大家对代码有问题,想交流的可以进群...效果图片 : 第一步: 在Load事件中写入代码 //在datagridview中添加button按钮 DataGridViewButtonColumn btn = new...中添加button按钮 DataGridViewButtonColumn btn2 = new DataGridViewButtonColumn(); btn2...别急 我们在 dataGridView1_CellContentClick事件中添加方法 //点击第一行button按钮事件 int index = dataGridView1...id的值 第三步: 相信大家也发现了,我们的按钮都能触发,那这样肯定不能区分删除和修改,于是我们给控件命名的作用就来了 我们在 dataGridView1_CellContentClick事件中修改下刚刚的代码

    1.7K30

    Xcelsius(水晶易表)系列7——多选择器交互用法

    集合以上图表中的三个选择器和数据表,我的大体思路是这样的: 通过标签式选择菜单传递产品类型参数、通过单选按钮传递年份参数、通过复选框传递地区参数。...同理,T8:T10为标签菜单的标签链接位置,目标插入位置为U7,用鼠标单击标签——产品A、产品B、产品C,依次在U7单元格返回1、2、3值。...在复选框的下拉菜单中依次分别单击北京、天津、河北……新疆,则U11单元格会依次输出1、2、3……31。...match函数的意思是,在C10:C288单元格区域(年份、产品类型、地区名称信息合并)中查找C3(三个选择器返回的年份、产品类型、地区合并信息)单元格所在行,查找方式为精确查找(0代表精确查找)。...至此,动态仪表盘全部配置完毕,可以通过预览功能查看动态交互性能是否完好,没有问题之后,可以通过水晶易表的主题、颜色以及统计图属性菜单中的外观项目精修字体、配色和背景,也可以在部件中插入专门的背景色块做衬托

    2.7K60

    2022年最新Python大数据之Excel基础

    对数据进行简单排序的方法是,选中数据的字段单元格,单击【升序】或【降序】按钮。...方法如左下图所示,选中第一行的某个单元格,单击【开始】选项卡下【排序和筛选】菜单中的【筛选】按钮。此时第一行的字段名称单元格会出现三角形按钮,通过该按钮可以实现筛选操作。...二维表将无法顺利建立数据透视表。 表中不要有空值 原始数据不要出现空行/空列。如数据缺失,或为“0”值,建议输入“0”而非空白单元格。...创建数据透视表 •使用推荐的透视表 在原始数据表中,单击【插入】选项卡下【表格】组中的【推荐的数据透视表】按钮,即可出现一系列推荐的透视表 。...如下图所示,选中不同的透视表,在右边可以看到透视表的明细。 •自定义建立透视表 自定义建立透视表的方法是,单击【插入】选项卡下【数据透视表】按钮,出现如下图所示的对话框。

    8.2K20

    一篇带你了解如何使用纯前端类Excel表格构建现金流量表

    要创建我们的现金流日历,我们需要创建如下所述的三张表: 数据源表 模板表 现金流日历:渲染表 数据源表 我们示例的数据源是交易列表。...我们创建了一个更动态的表格,当我们需要数据而不是单元格范围时,我们可以引用 Table1。...(在我们的例子中为 B2) 主页选项卡 → 单元格下拉菜单 → 月份选择器 在命令右侧,单击......设置选取器的开始、结束年份和高度 然后,我们在进行计算时为包含月份的单元格指定一个名称。 在公式选项卡上,选择名称管理器 在弹出窗口中,单击新建按钮 设置单元格的名称。...为 currentMonth 创建名称范围的步骤是: 在公式选项卡上,选择名称管理器 在弹出窗口中,单击新建按钮 设置单元格的名称 在我们的示例中: name:当前选择;refer to: ='Cash-Flow

    10.9K20

    EasyGBS级联通道表在mysql中无法生成的问题排查及调整

    用过国标协议平台EasyGBS的朋友们应该都知道,GB28181协议是公安部提出来的,能够对接公安部的网络系统,给安防带来了很大的便利性,EasyGBS就支持集成接入自己的平台,也能够对视频进行录像,同时...,EasyGBS有很多二次开发的可能,因为我们会提供丰富的二次开发接口,是一种十分实用的视频监控网页直播方案。...作为上级平台,EasyGBS可能遇到很多平台或设备同时接入的情况,这时我们可能会遇到EasyGBS级联通道表在mysql中无法生成的问题,查看数据库发现在程序生成通道级联表时卡住了。...经过查验代码后我们发现是编译级联表的struct结构体的编译存在失误,多了一个分号,因此尝试将该符号去除。...添加如下代码,在创建级联表的struct结构体中id字段设置主键和类型之间的type在mysql中不能用分号隔开,去除后在mysql和sqlite中均正常。

    1.3K20

    最新Python大数据之Excel进阶

    1.利用连续区域的所有数据 使用工作表中连续区域的所有数据,只需单击该数据区域的任一单元格,通过插入图表命令插入图表即可 选定部分数据 先选择建表要用到的数据,再通过插入图表命令插入选定类型的图表...二维表将无法顺利建立数据透视表。 表中不要有空值 原始数据不要出现空行/空列。如数据缺失,或为“0”值,建议输入“0”而非空白单元格。...表中不要有合并单元格 数据透视表的原始表格中不要有合并单元格存在,否则容易导致透视分析错误 填充合并单元格办法:取消合并单元格 ->选中要填充的空单元格 ->输入公式->按Ctrl+Enter键重复操作...创建数据透视表 •使用推荐的透视表 在原始数据表中,单击【插入】选项卡下【表格】组中的【推荐的数据透视表】按钮,即可出现一系列推荐的透视表 。...如下图所示,选中不同的透视表,在右边可以看到透视表的明细。 •自定义建立透视表 自定义建立透视表的方法是,单击【插入】选项卡下【数据透视表】按钮,出现如下图所示的对话框。

    26250

    Excel图表学习51: 根据选择高亮显示图表系列数据点

    学习Excel技术,关注微信公众号: excelperfect 本文分享一个动态图表示例,效果如下图1所示。当按下工作表中不同的按钮时,图表会自动更新,高亮显示相应数据系列的数据点。 ?...图3 步骤2:绘制形状按钮。单击功能区选项卡“插入—形状—圆角矩形”,如下图4所示。 ? 图4 在工作表中插入一个圆角矩形,添加文本。同样的操作,再插入2个圆角矩形,并添加文本。...图5 步骤3:给圆角矩形按钮命名。选择文本为2016的圆角矩形形状,在工作表左上角的名称框中输入“2016”,如下图6所示。 ?...图6 同样的操作,给文本为2017和2018的圆角矩形形状分别命名为“2017”和“2018”。 步骤4:利用公式提取数据。 1.在单元格F2中输入“2016”。...此时,在图表中创建了与某一年份相同的数据系列,只是颜色不同,如下图8所示。 ? 图8 1.选取刚创建的新系列,单击右键,选取“设置数据系列格式”命令,设置线条为“无线条”,如下图9所示。 ?

    3.9K20

    那人的Excel技巧好烂,他做1个小时,别人29秒搞定

    它的位置也是非常不起眼的,就在插入选项卡下,”数据透视表“旁边,因此创建表格的方法就是选中一个数据区域,单击插入,单击”表格“,根据实际情况勾选”数据包含标题“,单击确定。...下面咱们就来介绍:利用智能表格创建动态数据透视表(创建一次,以后就再也不用更改了,每次统计数据只需要刷新一下数据透视表即可,这真是万能的模版嘛)。...利益(Benefits)表格使得创建动态数据透视表变得极其简单,哪怕是小白都可以一键轻松创建动态数据透视表 案例(Evidence):只需一键搞定动态数据透视表的技巧 操作技巧 1.选中数据源中的任意单元格...2.选择数据源中的任意单元格,按下Alt+N+V打开创建数据透视表对话框,我们可以看到选择数据源框显示的是”表格1“,这表明我们是利用表格创建数据透视表,单击确定。...让你筛选不受限的秘诀 在Excel中,当前活动工作表往往只允许筛选一个数据区域。然而,当我们将数据区域转换成智能表格时将会打破这种限制。

    2.6K50

    Excel 如何简单地制作数据透视图

    在数据分析过程中,图表是最直观的一种数据分析方式,数据透视表具有很强的动态交互性,而Excel也可以根据数据透视表创建成同样具有很强交互性的数据透视图,而且,直接通过普通表格创建数据透视图,也将同步创建一张数据透视表...1、根据普通数据表创建数据透视图 选择数据源区域中任意单元格,在“插入”选项卡中单击“数据透视图”下拉按钮; 在打开的对话框中设置好数据源区域及放置位置,通常保持默认设置即可,单击“确定”按钮,即可创建一张数据透视表的数据透视图...2、根据数据透视表创建数据透视图 选择数据透视表,在“数据透视表工具 选项”选项卡中单击“数据透视图”按钮,在打开的对话框中选择要使用的图表类型, 或者在“插入”选项卡中单击对应的图表类型按钮,选择需要使用的图表...5、更改数据透视图的布局样式 例如,要为更改图表类型后的折线图进行布局设置,使其创建的数据透视图布局更加符合要求,具体步骤为: 单击“数据透视图工具 设计”选项卡的“图表布局”组中的“快速布局”按钮,在弹出的下拉列表中选择需要的布局效果...例如,可以通过使用数据透视图的筛选按钮为产品表中的数据进行分析,我想看到一季度雷凌车在各个地区的销量,具体步骤为:单击图表中的“季度”字段按钮,只勾选“一季度”,单击“确定”按钮,在数据透视表字段中,只勾选

    47220

    Power Query 真经 - 第 6 章 - 从Excel导入数据

    图 6-1 在 Excel 中名为 “Sales” 表的数据 要将这些数据导入 Power Query。 单击表格中的任意一个单元格。...创建一个新的查询,【获取数据】【自其他源】【来自表格 / 区域】。 【注意】 在微软 365 之前的 Excel 版本中,【来自表格 / 区域】按钮被称为其他名字。...其方法是创建一个动态命名的区域,它将随着数据的增长而自动扩展。 这种方法不能通过单击按钮来实现的,需要在开始之前设置一个动态名称,所以现在就开始。 选择 “Dynamic” 工作表。...$A:$A)) 单击【确定】。 【注意】 如果用户不愿意输入整个公式,可以在动态工作表的 H2 中找到它。请确保不要复制单元格内容开头的字符。...图 6-x-5 无法在公式栏引用到动态区域 在公式栏的下拉框中无法找到已经命名的动态区域,但这个动态区域是的确可以使用的。图 6-x-6 所示。

    16.6K20

    Excel图表学习60: 给多个数据系列添加趋势线

    步骤2:在弹出的“选择数据源”对话框中,单击“添加”按钮,弹出“编辑数据系列”对话框,如下图3所示。 ? 在“系列名称”中输入名称,例如趋势线。...单击X轴系列值右侧的单元格选择按钮,用鼠标选择工作表中的单元格区域B3:B11,在文本框中输入逗号,然后再用鼠标选择工作表中的单元格区域D3:D11,再在文本框中输入逗号,接着再用鼠标选择工作表中的单元格区域...F3:F11,最后单击右侧的单元格选择按钮回到“编辑数据系列”对话框。...将Y轴系列值中的“={1}”删除,单击其右侧的单元格选择按钮,用鼠标选择工作表中的单元格区域C3:C11,在文本框中输入逗号,然后再用鼠标选择工作表中的单元格区域E3:E11,再在文本框中输入逗号,接着再用鼠标选择工作表中的单元格区域...G3:G11,最后单击右侧的单元格选择按钮回到“编辑数据系列”对话框。

    8.2K41

    问与答98:如何根据单元格中的值动态隐藏指定的行?

    excelperfect Q:我有一个工作表,在单元格B1中输入有数值,我想根据这个数值动态隐藏行2至行100。...具体地说,就是在工作表中放置一个命令按钮,如果单元格B1中的数值是10时,当我单击这个命令按钮时,会显示前10行,即第2行至第11行;再次单击该按钮后,隐藏全部的行,即第2行至第100行;再单击该按钮,...则又会显示第2行至第11行,又单击该按钮,隐藏第2行至第100行……也就是说,通过单击该按钮,重复显示第2行至第11行与隐藏第2行至第100行的操作。...注:这是在chandoo.org的论坛上看到的一个贴子,有点意思。...EntireRow.Hidden = False Application.Goto Range("A1"), True b =False End If End Sub 在工作表中放置一个命令按钮

    6.4K10

    VBA实战技巧01: 在代码中引用动态调整单元格区域的5种方法

    在VBA代码中,经常要引用单元格数据区域并对其进行操作。然而,如果对数据区域采用“硬编码”地址,那么当该区域大小变化时,必须修改相应的引用该区域的代码。...本文整理了可以动态引用数据区域的5种方法,供编写代码时参考。 方法1:使用UsedRange属性 工作表对象的UsedRange属性返回一个Range对象,代表工作表中已使用的单元格区域。...注意,如果第一行的最后一个单元格或者第一列的最后一个单元格为空,则本方法不会选择到正确的单元格区域。因此,本方法适用于数据区域的第一列在最后一行有值且第一行在最后一列有值的区域。...使用SpecialCells方法来查找工作表中包含数据的最后一个单元格。...End Sub 方法5:固定列 很多情况下,工作表数据区域的列是固定的,只是随着数据的添加,行数发生变化。

    4.7K30
    领券