jquery 单击事件局部变量越界问题

fengda2870 2009-03-30 06:18:39

问题描述
从数据库中读取出N条记录
每条记录都对应一个按钮
使用Jquery为每个按钮增加一个单击事件
单击按钮
所在行要进行更新的单元格数据
变成输入框可以更新所在行的数据

JavaScript文件代



$(document).ready(function() {   

  

    // 为修改按钮注册单击事件   

    var modifies = $(".modify");   

       

    for (var i =0; i < modifies.length; i++) {   

           

        $(modifies[i]).click(function() {   

               

               

            // 定位该修改按钮所在表单中typeName所在Td位置   

            // 注：查找的是Id   

            alert(i);   

            var typeName = "#" + (i+1) + "_typeNameCn";   

            var typeNameTd = $(typeName);   

  

            // 保存单元格中的数据   

            var text = typeNameTd.text();   

  

            // 清空td里面的内容   

            typeNameTd.empty();   

            alert(text);   

            // 建立一个文本框，即一个input的元素节点   

            // 注：name属性的命名要和action中的命名一致   

            var input = $("<input type=\"text\" name=\"mt.typeNameCn\" />");   

  

            // 设置文本框的值是保存起来的文本内容   

            input.attr("value", text);   

               

            // 将文本框中的内容加入到td中   

            typeNameTd.append( input );   

               

            // 隐藏"修改"按钮   

            $(modifies[i]).css("display","none");   

               

            // 找到提交按钮，让提交按钮显示出来   

            var submit = "#" + i +"_submit";   

            $(submit).css("display","block");   

  

        });   

    }   

       

  

});

jsp文件代码



<table>   

    <tr>   

        <td>   

            杂志类型编号   

        </td>   

        <td>   

            杂志类型名称   

        </td>   

        <td>   

            操作   

        </td>   

    </tr>   

  

    <s:iterator value="mts">   

        <s:form name="editMagazineTypeForm" method="post" theme="simple">   

            <tr>   

                <td>   

                    <s:property value="typeId" />   

                        

                </td>   

                <%   

                    //指定对应的id值，便于定位单元格   

                %>   

                <td id="${typeId}_typeNameCn">   

                    <s:property value="typeNameCn" />   

                </td>   

                <td>   

                    <s:hidden name="mt.typeId" value="%{typeId}"></s:hidden>   

                    <s:submit value="修改fdfdf" onclick="this.disabled='true'"  

                        cssStyle="display:none;"></s:submit>   

                    <button class="modify" onclick="%{typeId}">   

                        修改   

                    </button>   

                </td>   

            </tr>   

        </s:form>   

    </s:iterator>   

  

</table>