开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在迭代创建HTML表时动态设置<TD>的id，从而获得ID值onBlur动作？

在迭代创建HTML表时，可以使用JavaScript来动态设置<td>元素的id，并且在onBlur动作中获取id值。以下是一个示例的解决方案：

<!DOCTYPE html>
<html>
<head>
    <title>动态设置<td>的id并获取ID值</title>
    <script>
        function createTable() {
            var table = document.createElement('table');
            var tbody = document.createElement('tbody');
            
            // 迭代创建表格行
            for (var i = 0; i < 3; i++) {
                var tr = document.createElement('tr');
                
                // 迭代创建表格单元格
                for (var j = 0; j < 3; j++) {
                    var td = document.createElement('td');
                    var cellId = 'cell-' + i + '-' + j;  // 动态生成单元格id
                    
                    td.setAttribute('id', cellId);  // 设置单元格id
                    td.setAttribute('onBlur', 'handleBlur(this.id)');  // 设置onBlur动作
                    td.innerHTML = cellId;  // 为了显示id，这里直接将id作为单元格内容
                    
                    tr.appendChild(td);  // 将单元格添加到行中
                }
                
                tbody.appendChild(tr);  // 将行添加到表格体中
            }
            
            table.appendChild(tbody);  // 将表格体添加到表格中
            document.body.appendChild(table);  // 将表格添加到文档中
        }
        
        function handleBlur(cellId) {
            // 获取到了id值，可以在这里进行后续的操作
            console.log('Blur event triggered for cell with id:', cellId);
        }
    </script>
</head>
<body onload="createTable()">
</body>
</html>

上述示例使用JavaScript动态创建一个3x3的表格，并且为每个单元格设置了唯一的id。同时，使用onBlur事件处理程序来捕获单元格失去焦点的事件，并获取相应单元格的id值。

该示例中的createTable()函数用于创建表格，handleBlur()函数用于处理onBlur事件。你可以根据需要自定义这两个函数中的逻辑来实现你的具体业务需求。

请注意，示例中的代码只是一个简单的演示，你可以根据自己的实际需求进行扩展和修改。另外，对于每个问题中提到的知识点和名词，你可以自行进行扩展和补充。

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

有帮助

没帮助

相关·内容

Web-第三天 JavaScript学习【悟空教程】

主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。...返回值：一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。...3.2.2 JavaScript样式获得或修改获得或设置样式 obj.style.属性，获得指定“属性”的值。 obj.style.属性=值，给指定“属性”设置内容。...获得元素 lgetElementById() 通过id属性值获得元素（整个HTML文档id位置） id=””> lgetElementsByName() 通过name属性值获得所有元素（整个...() 通过标签名获得所有的元素创建 createElement() 创建指定名称的元素 createTextNode() 创建指定内容的文本节点常见属性 childNodes，获得所有的子节点

3.4K1 0

3-DOM

DOM(Document Object Model) 文档对象模型 ---- 概念将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作 W3C...ID的td节点 var td_id=document.createElement("td"); //创建节点 var text_id=document.createTextNode...(num); //创建文本子节点 td_id.appendChild(text_id); //插入子节点 //创建姓名的td节点...> HTML DOM 主要功能标签体的设置和获取：innerHTML 使用html元素对象的属性控制样式 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML...ondblclick 当用户双击某个对象时调用的事件句柄。焦点事件 onblur 元素失去焦点。 onfocus 元素获得焦点。

1.3K2 0

DOM 又是个什么鬼?

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。...() 把指定属性设置或更改为指定值 removeAttribute() 元素中移除指定属性 innerHTML 设置或返回元素的内容注意 innerHTML 获取/设置标签体内容【该标签会刷新父标签内所有内容...，会导致id绑定的监听失效，需要设置属性绑定】 1.3.2 示例 <!...1.4.1 常用方法方法描述 name 返回属性的名称 value 设置或返回属性的值 1.5 事件 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态...1.5.1 事件句柄点击事件事件描述 onclick 单击事件 ondblclick 双击事件焦点事件事件描述 onblur 失去焦点 onfocus 元素获得焦点加载事件事件描述

1.3K3 0

Ajax+Servlet实现智能搜索框

if(xmlHttp.readyState==4){ //200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误 if..."); //获得这些数据之后，就可以动态的显示数据了。.../* td.onclick = function(){ //这个方法实现的是，当用鼠标点击一个关联数据时，关联数据自动填充到输入框中。...-- 输入框 --> id="keyword" onkeyup="getMoreContents()" onblur...-- 下面是内容展示的区域 --> id="popDiv"> id="content_table" bgcolor="#FFFAFA" border

9193 0

【Java Web_05】DOM

获取Element对象 ① getElementById() 根据id属性值获取元素对象。...id属性值一般唯一 ② getElementsByTagName() 根据元素名称获取元素对象们。...方法 ① setAttribute() 设置属性 ② removeAttribute() 删除属性四、Node对象 1. 概述 * HTML文档会生成一个DOM树。 2....innerHTML 获取/设置标签体内容【该标签会刷新父标签内所有内容，会导致id绑定的监听失效，需要设置属性绑定】五、事件监听机制 1....焦点事件 ① onblur 失去焦点 ② onfocus 元素获得焦点。 3. 加载事件 ① onload 一张页面或一幅图像完成加载。 4.

7902 0

JavaWeb day3 JavsScript 入门

如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容图片当我点击上面左图的点击我按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能...而在JavaScript 是一门弱类型语言，变量==可以存放不同类型的值==；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数 var test = 20; test = "张三";...图片而我们只讲解 length 属性，该数组可以动态的获取数组的长度。...2，遍历数组，通过将复选框元素对象的 checked 属性值设置为 true 来改变复选框的选中状态 for (let i = 0; i 获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。图片 onblur 失去焦点事件。

7.5K1 0

JavaWeb day3 JavaScript入门

如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的点击我按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。...我们应该让用户看到页面内容，然后再展示动态的效果。 ### 2.2 外部脚本 **第一步：定义外部 js 文件。如定义名为 demo.js的文件** 项目结构如下： !...元素对象的 checked 属性值设置为 true 来改变复选框的选中状态 for (let i = 0; i < hobbys.length; i++) { hobbys[i].checked...当表单提交时触发该事件 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 onfocus 获得焦点事件。...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。

7.4K2 0

JavaScript详细解析

将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作具体方法代码实现的事件事件名说明 onblur 元素失去焦点，在对象失去焦点时发生 onchange 域的内容被改变时发生 onclick 当用户点击某个对象时调用的事件句柄 ondblclick...当用户双击某个对象时调用的事件句柄 onfocus 元素获得焦点时发生 onsubmit 确认按钮被点击时发生 onreset 重置按钮被点击，事件会在表单中的重置按钮被点击时发生...创建 tr 元素。创建 4 个 td 元素。将 td 添加到 tr 中。获取文本框输入的信息。创建 3 个文本元素。将文本元素添加到对应的 td 中。创建 a 元素。...将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。 8.1、Windows窗口对象定时器唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。

1.5K1 0

第85节：Java中的JavaScript

开头 ID选择器：# ID选择器后代选择器：选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组：选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值'...scrollTo(): 把内容滚动到指定的坐标 scrollBy(): 按照指定的像素值来滚动内容 resizeTo(): 把窗口的大小调整到指定的宽度和高度 resizesBy(): 按照指定的像素调整窗口的大小...timeout，clearTimeout()取消由setTimeout()方法设置的timeout。..."js文件路径" type="text/javascript" /> ondblclick: 当用户双击某个对象时调用的事件 onerrror: 在加载文档或图像时发生错误 onfocus: 元素获得焦点...(): 创建文本节点 getAttribute(): 返回指定的属性值 setAttribute(): 把指定属性设置值 ?

2.6K2 0

【前端开发系列】—— 别说你不会Ajax

设置触发条件　　这里模拟一个使用场景，就是在用户登陆时，异步的对用户名以及密码进行验证。所以使用onBlur()触发，onBlur函数在输入框焦点遗失时，就会触发。... 16 创建Ajax的对象　　由于Ajax并不是一个统一的标准，因此各个浏览器有自己的创建方式，因此在创建时，需要进行浏览器的验证，使用如下的验证方法即可。...在函数返回时，可以使用之前创建好的req对象，调用它的readystate 以及 status属性，4表示XMLHttpRequest对象响应正常结束。200表示HTTP请求获得正确的响应。　　...成功时的效果！...失败时的效果！

6358 0

day16_ajax学习笔记

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS的新用法。 Ajax：只刷新局部页面的技术。...包括以下几种技术： JavaScript：更新局部的网页。 XML：一般用于请求数据和响应数据的封装。 XMLHttpRequest对象：发送请求到服务器并获得返回结果(浏览器内核创建的)。... method参数：指请求的HTTP方法，典型的值是GET或POST URL参数：指请求的地址 async参数：指是否使用异步请求，其值为true或false，默认值是true，一般这个参数不写...> 使用Ajax验证用户名是否存在的实现步骤：使用文本框的onblur事件(失去焦点事件) 使用Ajax技术实现异步交互 a) 获取用户名 a) 创建 XMLHttpRequest 对象 b)...处理响应结果，创建回调函数，根据响应状态动态更新页面 c) 建立一个连接 d) 发送请求示例代码如下： html;

1.1K3 1

ASP.NET MVC的客户端验证：jQuery的验证

如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解Web服务器访问的压力。...假设具体的验证操作实现在validate函数中，那么我们可以采用如下的HTML时相应的文本框在失去焦点的时候对输入的数据实施验证。...虽然演示jQuery验证使用一个单纯的HTML文件就可以了，但是在这里我们还是通过Visual Studio的ASP.NET MVC项目模板创建一个空的Web应用，这样做有两个目的：其一、项目在创建过程中会自动添加包含...由于我们使用View来定义最终呈现的完整的HTML，所以我们将Layout设置为Null。 1: @{ 2: Layout = null; 3: } 4: 的View的HTML进行相应的修改，将包含在表单中的四个文本框通过class属性设置的验证规则移除。

8.2K9 0

Ajax异步验证登陆或者注册

1.1：第一种方式：先说使用get方法向服务器发送请求的方法吧；　　　　首先创建一个页面，如register.jsp,代码如下所示： 1 的页面 8 9 //onblur失去焦点的值 10 11 //定义一个变量用于存放XMLHttpRequest...("account").value; 16 //alert("测试获取文本框的值："+account); 17 //先创建XMLHttpRequest对象 18...注册的页面 8 9 //onblur失去焦点的值 10 11 //定义一个变量用于存放XMLHttpRequest...("account").value; 16 //alert("测试获取文本框的值："+account); 17 //先创建XMLHttpRequest对象 18

3.8K6 0

Ajax的使用

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。...使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。..."jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?...：失去焦点触发事件--%> 用户名:id="txtName" onblur="a1()"/> html> 5、启动tomcat测试！..." id="pwd" onblur="a2()"> id="pwdInfo"> html> 【记得处理json乱码问题】测试一下效果，

1.5K3 0

关于后端代码的总结_辐射4最强防具代码

当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件: myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可...可以通过将变量的值设置为 null 来清空变量。...该值介于 2 ~ 36 之间当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。...HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 function...获得了足够的能力来创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有

3.2K2 0

Ajax研究

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。...使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。..."jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?..., 发起一个请求(携带信息)到后台--%> onblur：失去焦点触发事件--%> 用户名:id="txtName" onblur="a1()"/>...="name" onblur="a1()"/> id="userInfo"> 密码:id="pwd" onblur

9285 0

SpringMVC—Ajax使用

AJAx是一种无需重新加载整个页面的情况下,能够更新部分页面的技术 AJAx 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术传统页面(不适用ajax技术的页面...高可用、更丰富、更动态的Web用户界面。...JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?...//发给服务器 //接收服务器返回的数据 } 用户名 id="txtName" onblur="a1()"> html...id="userInfo"> 密码 id="pwd" onblur="a2()"> <span

1.7K1 0

JS的常用操作

HTML：它是整个网站的骨架。 CSS：它是对整个网站骨架的内容进行美化(修饰) Javascript：它能够让整个页面具有动态效果。 2.3 javascript 的组成部分 ?...：document.write(“”); 3.步骤分析第一步：确定事件(onsubmit)并为其绑定一个函数第二步：书写这个函数(获取用户输入的数据时需要在指定位置定义一个 id>) 第三步...) 第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block) 第五步：清除显示图片的定时操作() 第六步：书写隐藏图片的定时操作第七步：书写定时器中的函数(获取广告图片的位置并设置属性...element.firstChild 返回元素的首个子节点。 element.getAttribute() 返回元素节点的指定属性值。 element.innerHTML 设置或返回元素的内容。...> html> 八、使用JS完成省市二级联动 1.需求分析我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。

8.1K1 0

脚本语言知识总结.

[attribute *= value] 选取属性值包含value的所有元素练习6： ² 设置所有含有id属性的div，字体颜色红色 ² 设置所有class属性值含有itcast元素背景色为黄色...value... }); attr("checked","true") 等价于 prop("checked") 练习1： ² 点击一个button，动态设置 div的属性 id name class.../jquery-1.8.3.min.js"> // 点击一个button，动态设置 div的属性 id name class...> ④：HTML代码&文本&值操作 l 读取和设置某个元素中HTML内容 html() 读取innerHTML html(content) 设置innerHTML l 读取和设置某个元素中的文本内容...练习3： ² 传智播客获取div中 html和text 对比 ² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框

5K13 0

如何在Selenium WebDriver中处理Web表？

为网页创建的表称为网页表。...动态网页表表中显示的信息是动态的。例如，电子商务网站上的详细产品信息，销售报告等。为了演示如何使用Selenium处理表格，我们使用w3school HTML表格页面中可用的表格。...尽管使用表时跨浏览器测试的问题较少，但是Internet Explorer，Chrome和其他Web浏览器的某些旧版浏览器不支持HTML Table API。...获得有关行的详细信息后，我们将迭代该td >行下的标签。在这种情况下，对于本Selenium WebDriver教程，行（）和列（td >）都是可变的。...列值附加到XPath的值为td [1] / td [2] / td [3]，具体取决于必须访问以处理Selenium中的表的行和列。

4.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭