开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

<!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，来确定是否是按钮被点击。最后，我们在动态创建的表单元格中添加了一个按钮，并将其添加到相应的单元格中。

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

相关搜索:单击动态创建的表中的行，创建动态页面动态创建的单选按钮在单击时消失在reloadData之后无法单击tableView单元格中的按钮在SQLite中单击按钮即可动态创建表格动态创建按钮，然后在jquery中单击时删除该按钮使用JavaScript中的单击事件创建动态按钮在Selenium中无法单击按钮在动态页中动态创建按钮动态创建的按钮单击事件未触发在动态创建的元素中单击事件动态创建按钮的WPF C#创建单击事件如何通过单击表中的单选按钮随机选择动态值-Not可以单击单选按钮动态创建从表中删除行的按钮表中的可单击按钮使用jquery在表的单元格列中创建引导按钮无法单击webform中的按钮无法单击Selenium中的按钮在动态查询中创建表在javascript中动态创建表单击按钮后无法访问动态创建的文本框的文本

相关搜索:

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

有帮助

没帮助

相关·内容

Android开发(5) 代码方式生成表单

我们以前的几个例子中都是直接使用设计器来制作的表单视图，实际在开发中经常会遇到使用代码来动态的添加控件到视图中。

00

Excel图表学习53：创建动态的目标线

本文介绍一个在柱状图中创建动态目标线的技巧，如下图1所示，调节图表右侧的滚动条，可以看到左侧图表中用作目标线的红色直线作相应的调整。

02

[视频号]不用编程也能动态显示/隐藏提示

有时候，我们想在工作表中放置一些操作提示，在用户需要时显示，不需要时可以隐藏，但又不想使用VBA，那该怎么办呢？

03

Excel图表学习65：制作一个由复选框控制的动态图表

用于绘制图表的数据如下图2所示。其中，单元格区域B2:E9是原始数据，其余数据对原始数据进行处理，用于控制图表的绘制。

03

Excel实战技巧111：自动更新的级联组合框

引言：本文学习整理自www.xelplus.com，很好的一个示例，演示了在不使用VBA的情形下，如何创建自动更新的级联组合框。

02

excel常用操作大全

例如，在excel中输入单位的人员信息后，如果需要在原出生年份的数字前再加两位数字，即在每个人的出生年份前再加两位数字19，如果逐个修改太麻烦，那么我们可以使用以下方法来节省时间和精力:

01

在Excel中自定义上下文菜单（上）

上下文菜单（也称为快捷菜单）是在一些随用户交互之后出现的菜单，通常是鼠标右键单击操作。在Microsoft Office中，上下文菜单提供了一组在应用程序的当前状态或上下文中可用的有限选项。通常，可用的选择是与选定对象（如单元格或列）相关的操作。

04

VBA专题10-20：使用VBA操控Excel界面之隐藏和取消隐藏控件、组和选项卡

不能够单独隐藏内置组中的内置控件。然而，可以隐藏内置组，因此会隐藏该组中的所有控件。可以单独禁用（和启用）组中的控件。

02

灵光一闪！帮你使用Vue，搞定无法解决的“动态挂载”

在一些特殊场景下，使用组件的时机无法确定，或者无法在Vue的template中确定要我们要使用的组件，这时就需要动态的挂载组件，或者使用运行时编译动态创建组件并挂载。

03

Excel技巧：锁定包含公式的单元格

有时候，我们想保护工作表中的公式，不让用户能够随便修改，但是又不想限制用户编辑除公式之外的数据。此时，不能够简单的使用“保护工作表”命令，稍微需要添加一点技巧来实现。

02

Excel小技巧45：2个工作表操作习惯，利已也利他

在Excel工作表操作时，养成一些好的操作习惯，不仅方便自已，也方便他人。下面介绍两个，看大家有没有同感。

04

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

今天继续跟大家讲解水晶易表动态仪表盘的高级用法——多选择器交互用法。关于选择器的用法，之前的几篇零零碎碎的讲了些，今天是专门讲解水晶易表中几种重要的选择器用法——标签式菜单（在案例1中曾经讲过，不过具体用法不同，那里是匹配的原数据，按行插入，这里仅仅作为按钮选择工具，按值插入目标）、单选按钮（第一篇案例中同样也有使用）、组合框。在讲解本篇之前，你需要有点儿excel函数基础：index、match、offset、&文本合并函数等。（因为里面需要使用函数嵌套工具，这也是学习Xcelsius的入门门槛）。

06

Excel小技巧51：快速移除单元格中指定的字符

有时候，在工作表单元格中有一些特定的字符，可能是从其他地方导入数据时带过来的，也可能是误输入的，现在我们并不需要这些字符。如下图1所示，在单元格区域A1:A5中的“公众”我们现在并不需要，如果逐个编辑单元格，费时费力。

02

3个套路带你玩转Excel动态图表！

公式解读：当B30为ture的时候，B18单元格的取值为B3，当B30为false的时候，B18单元格显示错误值。

03

Excel图表学习52：清楚地定位散点图中的数据点

散点图是我们经常使用的一种图表类型，然而，当有许多个数据点时，往往很难弄清楚特定的数据点。其实，使用一些小技巧，我们能够很容易地定位散点图中特定的数据点，如下图1所示。

01

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

现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。此日历将广泛使用以下强大功能：

02

Excel小技巧18：阻止Excel将某些文本自动转换为超链接

当我们在工作表单元格中键入网址或者电子邮件地址时，Excel会自动将文本转换为超链接，然而，这项看似方便的功能有时候会带来一些麻烦，譬如我们想要编辑这些单元格时，不能直接单击，只能使用鼠标右键或者在公式编辑栏中来选择该单元格并编辑内容。

03

Excel小技巧42：创建自动更新的图片数据

可以使用Excel内置的“照相机”功能，来创建自动更新的图片数据。如下图1所示，当工作表单元格区域B2:C6中的数据改变时，右侧文本框中图片的数据会自动更新。

01

一起学Excel专业开发12：条件格式的2个应用技巧

条件格式是Excel中最为强大的功能之一，能够让我们不使用VBA代码，就能得到很多特殊的效果，例如对满足设定条件的指定单元格设置特定的格式，而在条件不满足时又能还原为原来的格式。

01

搭建内部系统的好帮手 - Superblocks 深度评测

在内部系统（比如 CRM、ERP、数据看板等）需要定制化开发的情况下，大多数团队会使用基于 Web 框架从头开始开发，如 React、Vue，然而这些框架上手存在一定困难，打包、部署、库的选择等方面对代码新手来说也可能具有挑战性，更不用说还得从头开始设计访问控制 (RBAC) 和数据的管理。本篇文章将主要讨论 Superblocks，这是一款最新的低代码开发工具，它正在迅速改变内部系统开发的格局。

02

ONLYOFFICE 桌面编辑器8.0上新！六大更新内容等你来用！

各位铁铁，相信你们对ONLYOFFICE都不陌生了，那么今天咱们具体来看看ONLYOFFICE桌面编辑器8.0的上的六大新内容吧~

01

Excel VBA编程

在Excel中，数据只有文本，数值，日期值，逻辑值和错误值五种类型。但是在VBA中，数据类型跟Excel不完全相同。根据数据的特点，VBA将数据分为布尔型（boolean），字节型(byte)，整数型(integer)，单精度浮点型(single)，双精度浮点型(double)，货币型(currency)，小数型(decimal)，字符串型（string），日期型（date）,对象型等等

03

HTML页面

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾

06

一起学Excel专业开发10：工作表界面设计

我们可以充分利用Excel内置的功能，再加上自已的创意，创造出让人印象深刻的Excel工作表用户界面。

01

Python让Excel飞起来：使用Python xlwings实现Excel自动化

本文将向你展示如何使用Python xlwings库自动化Excel。毋庸置疑，Excel是一款非常棒的软件，具有简单直观的用户界面，而Python是一种强大的编程语言，在数据分析方面非常高效。xlwings就像胶水一样，将两者连接到一起，让我们能够同时拥有两者最好的一面。

04

Excel实战技巧105：转置数据的3种方法

所谓转置数据，就是将数据从水平转变成垂直，或者从垂直转变成水平。换句话说，在Excel工作表中，将行中的数据转变到列中，将列中的数据转变到行中。下面将展示3种转置数据的方法：

03

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

本文分享一个动态图表示例，效果如下图1所示。当按下工作表中不同的按钮时，图表会自动更新，高亮显示相应数据系列的数据点。

02

Excel图表学习75：创建那时 Vs. 现在的交互式图表

我们经常会试图将去年的数字与今年或者上一季度与本季度的数字进行比较，那么，就让我们学习如何创建交互式图表来将过去与现在进行比较。

03

使用VBA实现数字雨效果

在Excel中，借助于Excel公式、条件格式和一点点VBA代码，也能实现高科技题材电影中的数字雨效果。如下图1所示。

03

精通Excel数组公式023：使用数组公式的条件格式

条件格式是有趣的，特别是使用公式并链接条件到单元格中时。下面是使用公式的条件格式的一些说明：

03

这还是我认识的WPS吗？这些功能也太可了吧！

没错，WPS可不是什么模仿微软的盗版软件出身，人家可是金山早在1988年就自主研发出来的办公软件！

02

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

图表中有多个散点图，如何创建图表中这些数据的趋势线呢？如下图1所示，使用上半部分所示的数据，绘制下半部分所示的散点图。

04

Spread for Windows Forms快速入门(16)---用Spread设计器创建和编辑图表

Spread支持85种丰富多彩的图表效果。可以在Spread设计器中基于工作表的数据直接生成图表，操作简单。同时，软件人员还可以在Visual Studio设计环境中定制图表的所有元素，包括标题、序列、轴、样式、图例等。这一篇介绍如何用Spread设计器创建和编辑图表。准备图表的数据首先要启动Spread设计器。你可以在 Visual Studio .NET 中鼠标右键点击 Spread 控件，在弹出菜单中选择 Spread 设计器；也可以在安装菜单中启动独立运行的Spread 设计器。在Spread

08

Java学习日记

1. 网页是由块级元素和行内元素堆叠成的，块级元素的实质是行内元素的首尾增加了一个换行符，所以块级元素的默认

04

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

•此时，B2单元格为被引用单元格，E2单元格为引用单元格，被引用单元格修改，引用单元格同样变化。

02

Excel实战技巧62：获取不重复的值作为数据验证列表项

“数据验证”（在Excel 2013以前称为“数据有效性”）是Excel中的一项重要功能，它能够提供下拉列表供用户选择输入项，也能限制用户输入符合设定的数据。

01

学习LAMBDA函数：将Excel公式转换为自定义函数（上）

引言：本文学习整理自microsoft.com，LAMBDA的真正的解决了Excel公式存在的先天不足，让Excel公式真正的强大起来了。

02

还在为选择办公软件而烦恼吗?不妨试试ONLYofficeV8.0

在线编辑文本文档从此不再受限制:100%享受查看,转换,打印和分页保真度,处理任何大小和复杂程度的文件,直接在浏览器上使用加强版的格式化工具集,ONLYOFFICE文档编辑器支持所有的流行格式

01

Excel表格的35招必学秘技[配图]

一、让数据按需排序　　如果你要将员工按其所在的部门进行排序，这些部门名称既的有关信息不是按拼音顺序，也不是按笔画顺序，怎么办?可采用自定义序列来排序。　　1.执行“格式→选项”命令，打开“选项”

08

Spread for Windows Forms高级主题(2)---理解单元格类型

理解单元格类型基本信息 Spread支持几十种单元格类型，如复选框单元格、日期时间单元格、或者一个简单的文本单元格。单元格类型可以对单独的单元格、列、行、一个单元格区域，甚至是整个表单进行设置。单元格类型决定了用户与单元格交互的方式，包括如何对数据进行访问、显示和校验等。单元格类型为单元格定义了一个editor用以处理输入数据，一个formatter用以分析和格式化数据，还有一个render用以控制单元格的数据如何显示。 Editor，Formatter，以及 Renderer 一个单元格类型包括一个edi

08

EXCEL的基本操作（十二）

①在“文件”选项卡中单击“选项”按钮，打开"Excel选项”对话框。在左侧类别列表中单击“公式”。

02

Excel实战技巧94：显示过期事项、即将到期事项提醒

我们可以在工作表中安排计划，并让通过特殊显示来提醒已经过期的事项和即将到期的事项，以便让我们更好地安排工作。

02

工作表单元格超链接出错，可能是浏览器搞的

我们可以在工作表单元格中设置超链接，这样，当单击该单元格中的文本时，就会跳转到链接所指向的位置，例如工作簿中的其他工作表。

02

在Excel中自定义上下文菜单（中）

在下面的示例中，将创建与上文描述的示例相同的按钮和子菜单，但使用RibbonX创建。

04

问与答119：如何使用文件浏览按钮插入文件路径到单元格中？

Q：如果我想在包含文件路径的单元格右侧添加一个文件浏览按钮，以便直接将所选的文件路径输入到该单元格，而无需手动复制粘贴文件路径，该如何实现？

03

Excel小技巧77：6个简单的方法，批量应用公式到整列

公式使电子表格“活”了起来。有时，我们会在一个单元格或者多个单元格中应用公式，但在很多情况下，我们需要将公式应用于整列（或者一列中的许多单元格）。为此，Excel提供了多种不同的方法，你只需使用鼠标单击几次或者使用快捷键，就可以完成这样的操作。

02

计算机文化基础

信息的概念：一般认为：信息是在自然界、人类社会和人类思维活动中普遍存在的一切物质和事物的属性。信息能够用来消除事物不确定的因素

04

html学习笔记第二弹

表格标签的作用：主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

01

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

本文为简书作者傲看今朝原创，CDA数据分析师已获得授权 ”智能表格“在Excel中就是叫表格，恐怕是Excel当中最不起眼最受人忽视，却极其实用的功能之一，可以1s让你的统计表变为高大上的模板。那么它都具有哪些神奇的技巧呢？今天我将带领大家扒一扒这个功能，以期能够帮助大家提高工作的效率。首先，智能表格这个功能在哪里呢？它的位置也是非常不起眼的，就在插入选项卡下，”数据透视表“旁边，因此创建表格的方法就是选中一个数据区域，单击插入，单击”表格“，根据实际情况勾选”数据包含标题“，单击确定。我们就可以普通的数

05

html 下

存在即是合理的。表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭