动态添加 id 到每个表格单元格

2024-06-23

我正在尝试创建一个动态 js 表,我想动态地为每个单元格提供 id。我想使用这些 id 在不同的 js 事件处理程序中使用。怎样才能做到呢?我尝试过不同的方法,但没有一个有效!

<html>

<head>
    <style>
        #colors {
            float: right;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <script>
        var d;
        var k = 0;
        function makeit() {
            var tbl = document.createElement("table");
            var atts = document.createAttribute("style");
            atts.value = "border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px;";
            tbl.setAttributeNode(atts);
            for (i = 0; i < 5; i++) {
                var rows = tbl.insertRow(i);

                for (j = 0; j < 7; j++) {
                    d = rows.insertCell(j);
                    d.height = "50px";
                    d.width = "50px";
                    d.style.backgroundColor = "yellow";
                    d.addEventListener("click", function myfunc() { d.style.backgroundColor = "red"; });


                }
            }


            document.body.appendChild(tbl);
        }

        window.onload = makeit;
    </script>
</body>

</html>

只需添加

d.id = "r" + i + "c" + j;

under

d=rows.insertCell(j);

为每个设置唯一的 idtd.
显然,你可以改变语法r2c4(这将是第 3 行和第 5 格)根据您自己的喜好。

如果你想在点击特定的时候调用一个函数td你甚至可以传递行索引(i) 和列索引 (j) 到该函数。

边注
您应该考虑使用 JavaScript 库或框架,例如jQuery https://jquery.org/对于这样的操作。从长远来看,这会给你的工作带来很大的便利。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态添加 id 到每个表格单元格 的相关文章

  • 在 Bootstrap 选择器上使用 jQuery 取消选择选项

    我对一些 UI 元素使用 Bootstrap SelectPicker 它允许用户选择多个选项并将其呈现在段落标签中的屏幕上 他们还应该能够删除选定的选项 这是我的代码 用于将选定的选项渲染到屏幕上 以便每个选项旁边都会显示一个 X 单击它
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • 如何在传单地图上显示热图

    我想在我的传单地图上显示热图 我使用了 heatmap jshttps github com pa7 heatmap js https github com pa7 heatmap js但它最终只是显示 未捕获的类型错误 无法分配给只读属性
  • Google Maps API - 调整大小会生成空白区域

    我正在研究一个看起来非常简单的功能 但却引起了一些头痛 我使用 GIS 并将其与 Google 地图集成 其中一位客户要求能够打开一个仅显示地图的单独弹出窗口 打开窗口不是问题 但当我尝试扩展包含地图的 IFrame 的宽度时 为了适应窗口
  • execCommand 的替代品

    我希望创建一个所见即所得编辑器 使用 jQuery 作为框架 我可以使用不同的方法来简化生产 我现在确实有一个正在工作的编辑 而且运作良好 我使用 iFrame 并将其设计模式设置为打开并从那里开始 然而 有一些事情困扰着我 以更改所选文本
  • 将json数据从servlet传递到jsp到js文件

    我得到了这个创建 JSON 数据的 servlet 我想将此数据传递到一个 jsp 页面 该页面应该通过 InfoVis 工具包显示数据 servlet java JSONObject json new JSONObject JSONArr
  • 如何使用 JQuery 创建新的 img 标签,并使用 JavaScript 对象中的 src 和 id?

    我从基本意义上了解 JQuery 但对它绝对是新手 并且怀疑这很容易 我在 JSON 响应中获得了图像 src 和 id 转换为对象 因此在 responseObject imgurl 和 responseObject imgid 中获得了
  • 我可以跳过 HTML5 中“style”标签中的属性“type”吗? [复制]

    这个问题在这里已经有答案了 根据W3学校 http www w3schools com tags tag script asp 我可以跳过属性type对于标签script在 HTML5 中 Evidence HTML 4 01 和 HTML
  • Ext JS grid 获取最后选定行的 dom

    有没有机会获得DOM网格内最后选定行的值 我只能得到带有值的记录 而不是DOM元素 和DOM元素我的意思是 tr 所选行的元素 var selectedRecord grid getSelectionModel getLastSelecte
  • Typescript:如何在构造函数之外初始化类属性

    我有一个场景 我需要在构造函数之外初始化类属性 考虑以下示例 class A public prop MyPropType public id string public constructor id string this id id p
  • 可访问性和所有这些 JavaScript 框架

    我研究一些 JavaScript 框架 例如 Backbone js 和 Batman js 已经有一段时间了 虽然我真的很喜欢它们 但我一直在关注一件棘手的事情 这个问题就是可访问性 作为一名网络开发人员 我一直试图让我的网站和应用程序考
  • 基于nextjs中的user-agent重写

    我在 NextJs 中有一个多域网站 我想根据域和设备类型获取数据 现在我可以识别该域 但我希望在重写规则中使用用户代理并在 getStaticProps 函数中使用它 这是我在 next config js 文件中的规则 async re
  • 推迟内联 JavaScript 执行? [复制]

    这个问题在这里已经有答案了 在我的网站中 我有许多内联 JavaScript 片段 其中大多数都需要 jquery 和类似的东西 但我想将 jquery 加载推迟到页面渲染之后 这意味着 我的内联 javascript 将在加载 jquer
  • 两个同时发生的事件

    我在这个页面上使用了一段JS代码http 200tr ru app admin http 200tr ru app admin 当我按下十字符号时 会发生 2 个事件 模糊和单击 但仅运行模糊代码 我需要反点击交叉代码 我怎样才能做到这一点
  • Nuxt.js 中的条件模块加载

    我的 Nuxt js 配置中有一个 Google 跟踪代码管理器模块 如下所示 modules nuxtjs google tag manager id GTM XXXXXXX 这工作正常 但我想知道如何根据站点设置的 cookie 值有条
  • Angular 2 App测试,如何访问和操作html元素?

    我有一个 Angular 2 前端需要测试 我在一个网站上找到了 https kendaleiv com angular 2 component testing template using testbed https kendaleiv
  • 在反应中导入多个文件

    我正在为我的 React 项目使用 create react app 它已经配置了 webpack 来导入图像 我希望将多个图像 例如 10 个 从图像文件夹导入到组件中 最简单的方法是添加多个导入语句 例如 import Img0 fro
  • AngularJS动画卡片翻转

    我正在尝试使用新的 AngularJS 方式在页面转换之间制作动画 并希望合并卡片翻转 例如http jsfiddle net nicooprat GDdtS http jsfiddle net nicooprat GDdtS body b
  • 在 Javascript 中用序列号映射数组

    下面的代码 let myArray Array apply null length 10 map Number call Number 创建以下数组 0 1 2 3 4 5 6 7 8 9 我只是不明白为什么 我在互联网上找不到任何解释这种
  • JavaScript 中的 touchstart 不再返回 TouchList

    我遇到了一个非常奇怪的问题 我正在绑定touchstart事件到一个元素 并且想要检索事件的 X 和 Y 坐标 全部文档 http developer apple com library safari documentation apple

随机推荐

  • vscode( vscode-ruby + rubocop ) 如何在保存时自动更正?

    环境 vscode 版本1 19 1 1 19 1 鲁博科普 0 52 1 Darwin mbp 16 7 0 Darwin 内核版本 16 7 0 2017 年 10 月 4 日星期三 00 17 00 PDT 根 xnu 3789 71
  • JQuery Ajax POST XML 结构/过滤器链

    我想通过 AJAX 发布 XML 结构来获取过滤结果集 网络服务能够处理发布请求 但我的发布似乎有问题 ajax url ajaxurl data inputxml escape
  • 如何将 DVI 转为 tex?

    知道如何获取 DVI 文件并将其转换为 tex 吗 这类似于将 PDF 转换为 XML 的问题 即 试图将汉堡变回牛 TeX gt DVI 和 XML gt PDF 都会丢失文档结构及其语义方面的信息 它需要大量的启发式方法和大量的语料库来
  • `geom_abline` 和 `facet_wrap` 似乎不兼容

    我使用时遇到错误geom abline在同一个情节中facet wrap or facet grid 我不明白为什么 例如 Example data ex lt data frame x 1 10 y 1 10 f gl 2 5 ggplo
  • 错误:确保控制器具有无参数公共构造函数 webapi

    我正在使用 webapi unity 和 mvc 我收到错误 确保控制器具有无参数公共构造函数 我已经看到类似问题的解决方案 但仍然无法使其工作 我已经安装了 unity webapi 并且似乎拥有所有必要的参考 Microsoft Pra
  • 如何使用 webpack 注入内部版本号?

    我想将内部版本号和版本信息注入到我的项目中 因为它是使用 webpack 构建的 例如 这样我的代码就可以执行以下操作 var buildInfo require build info 生成该值的最佳方法是什么build info构建时模块
  • 使用 sed 替换多行

    我以为我理解 sed 但我想不是 我有以下两个文件 我想用一个不同的行替换 why 和 huh 行 根本没有空格 测试 txt hi why huh hi why huh 测试2 txt 1 hi why huh hi why huh 以下
  • Rxjs 订阅方法被忽略

    在将其标记为重复之前 请注意这些都不适合我 问题1 https stackoverflow com questions 38142278 subscribe method is not triggered with rxjs 问题2 htt
  • FHIR 资源的 id 和标识符有什么区别?

    The Resource实体定义一个id属性为 此工件的逻辑 ID 同时对于像这样的资源MedicationRequest还定义了一个名为identifier 描述是 外部标识符 或 企业标识符 我想知道这两个属性有什么区别 从 RESTf
  • Bash:使用参数扩展查找和替换

    我想更换输入法 find string include 圆进度 38px 30px 4eb630 和输出 输出字符串 include 圆进度 38px 30px using find string pattern replacement s
  • 分解 SQL 表中每一行的 XML

    我有一个表 其中包含两列 ID 和 XML 数据 我想分解每个 ID 的 XML 我在 XML 中提取单个值 并且所有 XML 的结构都相同 我只是不确定如何循环遍历表并将 XML 查询应用于每一行 我需要应用的查询如下 Select to
  • MSVC:手动使用 link.exe

    我正在尝试使用测试 C OpenGL SDL 项目设置名为 Waf 的构建系统 但在链接过程中遇到了一些问题 据我所知 所有库都已正确找到 并添加到链接命令中 但链接过程似乎就像库未链接一样 为了尝试调试该过程 我尝试手动运行编译 链接过程
  • Ruby 中 block 和 &block 的区别

    为什么有时我应该在接受块的函数内使用 block 而有时应该使用 block block只是一个局部变量 block是对传递给该方法的块的引用 def foo block nil p block end foo gt nil foo tes
  • Nginx - “强制”200 缓存响应而不是 304

    是否有可能以某种方式强制执行 200 缓存 响应 而不是静态文件未修改的 304 响应 如果是这样 您可能会节省大量服务器请求 并显着加快回访者的加载时间 我发现单独的 Expires 并不能正确设置行为 下面是肯定的火 Set cache
  • 从 pdf 转换时的默认 imagemagick 密度

    我们有以下代码 convert foo pdf foo tiff 这多年来一直工作良好 并且生成的 tiff 具有合理的打印质量 我们刚刚升级了 imagemagick 现在 tiff 的分辨率较低 我假设最近的 IM 升级发生了一些变化
  • 使用 Quartz.net 配置 ADOJobStore

    如何使用 Quartz net 设置工作库 他们在网站上提供的教程对我没有帮助 在此页面中虽然有步骤http quartznet sourceforge net tutorial lesson 9 html http quartznet s
  • 私有 EC2 和 HTTP 流量中的 AWS 应用程序

    我有一个应用程序在私有子网的 EC2 实例中运行 以增加额外的安全性 直接从与公共子网关联的面向互联网的 NLB 接收流量 我还在公共子网中配置了一个 NAT 网关 以便私有 EC2 实例可以从 Internet 下载所需的任何内容 我刚刚
  • jQuery onclick addclass/removeclass 并添加淡入淡出

    在过去的三天里 我一直在寻找解决我的问题的方法 我见过很多人和我有同样问题的人 但没有一种解决方案可以解决我的问题 所以我又回到了起点 我请求你们友好的人们的帮助 我现在正在运行以下脚本 该脚本非常适合我 show commentsandn
  • 序列化和反序列化的 xstream 错误

    我在 Java 中使用 xStream 序列化 java 库中的 java 对象 并在客户端反序列化它 我有几个问题 如果我这样做 XStream xstream new XStream xstream setMode XStream ID
  • 动态添加 id 到每个表格单元格

    我正在尝试创建一个动态 js 表 我想动态地为每个单元格提供 id 我想使用这些 id 在不同的 js 事件处理程序中使用 怎样才能做到呢 我尝试过不同的方法 但没有一个有效