`
sbpya
  • 浏览: 602290 次
  • 性别: 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中相关的闭包的概念范围.

 

分享到:
评论

相关推荐

    javascript函数的解释

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

    deasync, 通过 node 事件循环的JavaScript包装器将异步函数转换为同步.zip

    deasync, 通过 node 事件循环的JavaScript包装器将异步函数转换为同步 DeAsync.jsDeAsync将异步函数转换为同步,通过在JavaScript层调用 node.js 事件循环,以阻塞机制实现。 deasync的核心是 C++ 中的writen 。动机...

    JavaScript详解(第2版)

     13.7.4 将事件传递给JavaScript函数   13.7.5 鼠标坐标   13.7.6 按键事件   13.8 处理事件的脚本模型   13.9 应知应会   练习   第14章 CSS与JavaScript   14.1 什么是CSS   14.2 什么是...

    浅析javascript中函数声明和函数表达式的区别

    以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而  函数表达式可以在任何地方声明. 下面分别用两种方法定义...

    JavaScript基础教程第8版

    《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...

    JavaScript语言教程及案例.docx

    当涉及到JavaScript的语言教程和案例时,下面是一个简单的介绍以及一个示例...- JavaScript中的函数也可以作为对象的方法调用。 #### 4. DOM操作: - JavaScript可以操作HTML文档的内容、结构和样式。 - Document Obj

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    编写可维护的JavaScript(中文)

    《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...

    浅谈javascript 函数表达式和函数声明的区别

    以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而  函数表达式可以在任何地方声明. 下面分别用两种方法定义...

    JavaScript权威指南(第6版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

    JavaScript权威指南(第6版)中文文字版

    《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增...

    JavaScript权威指南(第6版)中文版pdf+源代码

     9.3 JavaScript中Java式的类继承207  9.4 类的扩充210  9.5 类和类型212  9.6 JavaScript中的面向对象技术217  9.7 子类230  9.8 ECMAScript 5 中的类239  9.9 模块248  第10章 正则表达式的模式匹配253  ...

    JavaScript权威指南(第6版)(附源码)

    本书要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端...

    JavaScript+DOM编程艺术

     4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯  5.1 不要误解JavaScript  5.2 预留退路  5.3 向CSS学习  5.4 分离JavaScript ...

    JavaScript基础.doc

    4.2 函数的调用 14 4.3 构造函数 14 4.4 默认函数 14 5 对象 16 5.1 默认对象 16 5.1.1 数组对象 16 5.1.2 布尔对象 17 5.1.3 日期对象 18 5.1.4 函数对象 19 5.1.5 数学对象 21 5.1.6 数值对象 22 5.1.7 字符串对象...

    JavaScript 权威指南(第四版).pdf

     9.3 JavaScript中Java式的类继承207  9.4 类的扩充210  9.5 类和类型212  9.6 JavaScript中的面向对象技术217  9.7 子类230  9.8 ECMAScript 5 中的类239  9.9 模块248  第10章 正则表达式的模式匹配253  ...

    JavaScript+DOM编程艺术(二)

     4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯  5.1 不要误解JavaScript  5.2 预留退路  5.3 向CSS学习  5.4 分离JavaScript ...

    JavaScript+DOM编程艺术(一)

     4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯  5.1 不要误解JavaScript  5.2 预留退路  5.3 向CSS学习  5.4 分离JavaScript ...

    JavaScript权威指南(第6版)(中文版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

Global site tag (gtag.js) - Google Analytics