none
有关JS函数内联的问题 RRS feed

  • 问题

  • var table=document.getElementById("mytable");
    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=function(){alert(i);}
    }

    以上代码,我是想点击单元格的时候,能够正确显示序号。但是我发现点击之后alert显示的一律都是最后一个值。例如表格有两行,那么无论点那个单元格,alert显示的都是“2”

    能做到点第一行的时候,显示“0”;点第二行的时候显示“1”吗?

    请问这是为什么??


    da jia hao!
    2011年6月22日 7:10

答案

  • 你这样写的 i的引用值是循环完了的最后一个值,也就是有几行就显示几了,正确的写法应该使用闭包。

    改成这样:

     

    var table=document.getElementById("mytable");

    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=(function(i){return function(){alert(i);};})(i);
    }
    • 已标记为答案 liubin 2012年3月19日 9:19
    2011年6月24日 0:42

全部回复

  • 你好:)

    当然可以——请复制以下代码,保存成html,运行。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表格单元格点击查询索引</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script>

            $(function () {

                $("tr").click(function () {

                    alert($(this).index());

                });

            })
        </script>
    </head>
    <body>
        <table style="width: 100%;">
            <tr>
                <td>
                   1
                </td>
                <td>
                   2
                </td>
                <td>
                   3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                   5
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                   7
                </td>
                <td>
                    8
                </td>
                <td>
                   9
                </td>
            </tr>
        </table>
    </body>
    </html>


    如果你有其它意见或私下交流,请发送邮件到:maledong@qq.com;或者请讨论
    下载MSDN桌面工具(Vista,Win7)
    下载Technet桌面小工具(Vista,Win7)
    慈善点击,点击此处
    2011年6月23日 5:56
  • 你好:)

    当然可以——请复制以下代码,保存成html,运行。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表格单元格点击查询索引</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script>

            $(function () {

                $("tr").click(function () {

                    alert($(this).index());

                });

            })
        </script>
    </head>
    <body>
        <table style="width: 100%;">
            <tr>
                <td>
                   1
                </td>
                <td>
                   2
                </td>
                <td>
                   3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                   5
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                   7
                </td>
                <td>
                    8
                </td>
                <td>
                   9
                </td>
            </tr>
        </table>
    </body>
    </html>


    如果你有其它意见或私下交流,请发送邮件到:maledong@qq.com;或者请讨论
    下载MSDN桌面工具(Vista,Win7)
    下载Technet桌面小工具(Vista,Win7)
    慈善点击,点击此处

    这样不行。因为你是用td对象本身再去获取index,这样的话就要求我将所有的数据都预先弄到td里面,然后在内联函数里面再将其获取出来,这应该不是好的解决方法。

    所以我是希望能够直接把不同的参数,传递给内联函数。


    da jia hao!
    2011年6月23日 6:56
  • 这样不行。因为你是用td对象本身再去获取index,这样的话就要求我将所有的数据都预先弄到td里面,然后在内联函数里面再将其获取出来,这应该不是好的解决方法。

    所以我是希望能够直接把不同的参数,传递给内联函数。


    da jia hao!


    没有理解你是什么意思?注意,我的数据仅仅是模拟一个数据表,不是要求你取出数据。如果我不填充这个表格,页面会是白色的,你不知道点击哪儿了。

    我jQuery应该是最简单的,符合你条件了。

    不过你最后一句话没有理解。

    是否可以具体说说你究竟想干什么?你把题目要求说一下。


    如果你有其它意见或私下交流,请发送邮件到:maledong@qq.com;或者请讨论
    下载MSDN桌面工具(Vista,Win7)
    下载Technet桌面小工具(Vista,Win7)
    慈善点击,点击此处
    2011年6月23日 7:01
  • 这个:

    alert($(this).index());

    实际上是让td去获取td自身的数据,所以不会出现我说的那个问题。

    但是我要求是,在创建内联函数的时候,就把数据直接传给内敛函数,而不要到内联函数在运行的时候又从td里面获取这些数据。

    我的做法:

    var table=document.getElementById("mytable");
    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=function(){alert(i);}
    }

    会导致传递给内联函数的参数“i”全部都成了for循环结束后的"i"

    即,如果rows.length=5

    那么实际运行的时候,alert显示的全部都是“5”,而不是1、2、3、4


    da jia hao!
    2011年6月23日 8:55
  • 你这样写的 i的引用值是循环完了的最后一个值,也就是有几行就显示几了,正确的写法应该使用闭包。

    改成这样:

     

    var table=document.getElementById("mytable");

    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=(function(i){return function(){alert(i);};})(i);
    }
    • 已标记为答案 liubin 2012年3月19日 9:19
    2011年6月24日 0:42
  • 这个:

    alert($(this).index());

    实际上是让td去获取td自身的数据,所以不会出现我说的那个问题。

    但是我要求是,在创建内联函数的时候,就把数据直接传给内敛函数,而不要到内联函数在运行的时候又从td里面获取这些数据。

    我的做法:

    var table=document.getElementById("mytable");
    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=function(){alert(i);}
    }

    会导致传递给内联函数的参数“i”全部都成了for循环结束后的"i"

    即,如果rows.length=5

    那么实际运行的时候,alert显示的全部都是“5”,而不是1、2、3、4


    da jia hao!

    恐怕用for不管用,尝试我的另外一个:)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表格单元格点击查询索引</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script>

            $(function () {

                $("tr").each(function () {

                    $(this).click(function () {

                        alert($(this).index() + 1);

                    });

                });

            })
         
        </script>
    </head>
    <body>
        <table style="width: 100%;">
            <tr>
                <td>
                    t
                </td>
                <td>
                    t;
                </td>
                <td>
                    t
                </td>
            </tr>
            <tr>
                <td>
                    t
                </td>
                <td>
                    t
                </td>
                <td>
                    t
                </td>
            </tr>
            <tr>
                <td>
                    t
                </td>
                <td>
                    t
                </td>
                <td>
                    t
                </td>
            </tr>
        </table>
    </body>
    </html>


    如果你有其它意见或私下交流,请发送邮件到:maledong@qq.com;或者请讨论
    下载MSDN桌面工具(Vista,Win7)
    下载Technet桌面小工具(Vista,Win7)
    慈善点击,点击此处
    2011年6月24日 3:17
  • 对不起各位了,有些人的回复真的没有理解我的问题。只有下面这个回复:

    var table=document.getElementById("mytable");

    for(var i=0;i<table.rows.length;i++)
    {
        table.rows[i].cells[0].onclick=(function(i){return function(){alert(i);};})(i);
    }

    能够解决我的问题。

    因为其他回复,都是在点击运行的时候,才去动态去获取td本身的index属性,和我要求“直接将index属性传给函数,在函数里面使用这个参数”完全不同!而这个使用闭包的方式就能够完美解决问题!


    da jia hao!


    • 已编辑 liubin 2012年3月19日 9:21
    2012年3月19日 9:20