`
sbpya
  • 浏览: 606264 次
  • 性别: Icon_minigender_1
  • 来自: 杭州,长沙
社区版块
存档分类
最新评论

javascript动态循环添加行及行中的事件调用带参数的函数

阅读更多

今天在做一个动态循环添加行,并在新行添加onclick事件,调用一个带参数的函数时,遇到一个问题,当行添加完成后,行上的onclick事件触发时,传入的参数总是循环里最后一行传过来的参数,现将错误的写法和正确的写法记录如下:

 

错误的写法:

 

 var displaySelectResult = function(str) {
            alert(str);
        }

 

if ('' != search_result) {
                for (var i = 0; i < search_result.length; i++) {
                    var newTR = search_table_results.insertRow();
                    var newTD = newTR.insertCell();
                    newTD.innerText = search_result[i];
                    newTD.attachEvent("onclick", function() {
                        displaySelectResult(newTD.innerText);
                    });
                }
            }

 

这种写法得到的结果是,添加的所有新行的onclick事件调用时,总是alert出来search_result[最后一个索引]的值,不能正确地把循环中的每一个索引相应的传给每次添加的行

 

正确的写法则应如下:

 

if ('' != search_result) {
                for (var i = 0; i < search_result.length; i++) {
                    var newTR = search_table_results.insertRow();
                    var newTD = newTR.insertCell();
                    newTD.innerText = search_result[i];
                    newTD.onclick = function (str) {
                        return function()    {
                          alert(str);
                        };
                    }(search_result[i]);
                }
            }

 

这就是javascript中相关的闭包的概念范围.

 

分享到:
评论

相关推荐

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...

    javascript函数的解释

    47.当在超链接中调用JS函数时用:(javascript:)来开头后面加函数名 48.在老的浏览器中不执行此JS:&lt;!-- //--&gt; 49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示...

    c++调用javascript代码

    - **调用函数**:通过上下文对象,可以查找并调用JavaScript中的函数,传入参数。 - **数据交换**:C++和JavaScript的数据类型不同,需要进行适当的转换。例如,C++的整型、浮点型需要转换为JavaScript的Number,...

    动态循环给onclick赋值(解决闭包问题)

    1. **立即调用的函数表达式 (IIFE)**:在每次循环中,创建一个IIFE,将当前循环变量作为参数传入。这样,每个IIFE都会有自己的作用域,其中的变量不会被其他函数共享。 ```javascript for (let i = 0; i ; i++) { ...

    javascript(函数查询chm+语法pdf)

    5. **函数式(Functional)**:JavaScript 支持函数式编程风格,允许将函数作为参数传递,也可以作为值返回。 **JavaScript函数查询CHM文件:** `JavaScript参考手册.chm` 是一个帮助文件,包含JavaScript的所有...

    javascript常用函数集合

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在客户端运行,为用户提供动态...通过阅读和学习"Javascript常用函数及基本教材集合.txt",你将对JavaScript有更全面的认识,并能够解决实际开发中遇到的问题。

    关于JS中setTimeout()无法调用带参函数问题的解决方法.docx

    然而,一个常见的问题是在尝试使用`setTimeout()`调用带参数的函数时,参数往往无法正确传递。这是因为`setTimeout()`默认只接受一个函数引用和一个延迟时间作为参数,而不直接支持传递额外的参数。这个问题可以通过...

    Javascript动态网页(实例版)

    包括变量声明(var关键字)、数据类型(如字符串、数字、布尔值、对象等)、控制流程(if...else语句、for循环、while循环)以及函数的定义与调用。理解这些基础概念是构建任何JavaScript程序的基石。 其次,DOM...

    javascript写的特效图片循环显示........

    在本文中,我们将深入探讨如何使用JavaScript实现特效图片的循环显示,这是网页设计中常见且重要的功能,可以提升用户体验。 首先,我们需要理解基本的HTML结构来展示图片。一个简单的HTML图片标签如下: ```html ...

    JavaScript动态网页编程

    JavaScript的基础语法与Java类似,包括变量声明、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、运算符(算术、比较、逻辑等)、流程控制(条件语句、循环结构)以及函数的定义和调用。...

    JavaScript动态网页设计经典实例

    1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null和undefined)、操作符(算术、比较和逻辑)、流程控制(条件语句if/else,循环for和while)以及函数的定义与调用。 2. **DOM...

    《JavaScript动态网页设计经典实例教程》

    在JavaScript动态网页设计中,首先需要掌握JavaScript的基础语法,包括变量声明、数据类型、运算符、流程控制(如if语句和循环)、函数定义与调用等。这些基础知识构成了编写任何JavaScript代码的基础。 二、DOM...

    JavaScript动态网站开发案例指导

    - DOM操作:学习如何使用JavaScript选择、添加、删除、修改DOM元素,以及事件监听和处理。 3. **AJAX与异步编程** - AJAX介绍:理解Asynchronous JavaScript and XML(异步JavaScript和XML),用于后台与服务器...

    一些公用的javascript函数

    JavaScript是一种广泛应用于Web开发的脚本语言,它在浏览器端运行,为网页添加交互性和动态功能。本压缩包“一些公用的javascript函数”包含了程序员在日常工作中经常使用的实用JavaScript函数,这些函数对于提升...

    javascript常用的函数

    2. `arguments`: 函数内部的一个对象,包含了调用函数时传递的所有参数。 3. `闭包`: 允许函数访问并操作外部作用域变量的机制。 五、对象操作 1. `Object.create()`: 创建一个新的对象,并将该对象的原型设置为...

    js如何调用单选按钮

    我们还定义了五个按钮,每个按钮的 `onclick` 事件都是调用 `f` 函数,并传入对应的参数。 JavaScript 的应用 在实际应用中,JavaScript 可以用于实现各种复杂的单选按钮控制逻辑,例如: * 根据用户的选择,动态...

    JavaScript动态网页

    1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined)、操作符(算术、比较、逻辑)、流程控制(条件语句、循环结构)以及函数。理解这些基础知识是学习JavaScript的...

    浅析JavaScript回调函数应用_.docx

    5. **Node.js中的事件驱动**:Node.js的非阻塞I/O模型依赖于回调函数,以避免阻塞事件循环。 三、JavaScript中的函数是对象 在JavaScript中,函数是特殊的对象,它们是Function构造函数的实例。这意味着函数可以...

    javascript教程&函数大全.rar

    可能涵盖的主题包括变量、数据类型(如字符串、数字、布尔值)、操作符、控制流(如条件语句、循环)、数组、对象、函数定义与调用、作用域、闭包、事件处理以及DOM操作等。这些基础知识是每个JavaScript开发者必备...

    js 每隔两秒执行一个函数 javascript

    - 为了保证代码的可读性和可维护性,建议将定时器相关的逻辑封装到一个独立的函数中。 - 如果定时器的函数涉及到DOM操作,确保浏览器已完成渲染,否则可能无法达到预期效果。 在`每隔两秒执行一个函数.htm`这个...

Global site tag (gtag.js) - Google Analytics