javascript动态增加表格行，在行的text框中用jquery选择输入项无效

我的那些师傅说
prototype jquery 专门摧残 js的 Array

解决方案 »

  1.   

    <head> 
    <link  charset="utf-8" rel="stylesheet" type="text/css" href="jquery.popup.css"/>
    <script type="text/javascript" charset="utf-8" src="jquery.js"> </script>
    <script type="text/javascript" charset="utf-8" src="jquery.dimensions.js"> </script>
    <script type="text/javascript" charset="utf-8" src="jquery.popup.js"> </script>
    </head><script type="text/javascript">
    jQuery(function($){
        $("input.popup").popup(' <a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');    $("#ding").focus(function(){
            //只知道有个focus，不知道focusout是什么东西
            $("#hztable").append('<input id="dganwei' + (++i) + '" type="text" class="popup" value="1" />');
            $("#dganwei" + i).popup('<a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');
            //$("input.popup").popup('<a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');
        });
    });
    var i = 2;
    </script><body>
    <div id="hztable">
      <input id="danwei1" type="text" class="popup" value="1" />
      <input id="danwei2" type="text" class="popup" />
      <br/>
      <input type="text" />
    </div><table width="10%" border=1 align="center" cellpadding="0" cellspacing="0" id="mxtable" >
    <tr align="center">
    <td>name <input id="ding" name="ding" type="text" maxlength="10" /> </td>
    </tr>
    </table></body>
    </html>
      

  2.   

    你那个错误是函数addNew有问题
    用DIV比表格简单很多
    既然都用到jQ了为什么不尽量用jQ来做呢
    没有测试，你自己测试一下<html>
    <head>
    <link  charset="utf-8" rel="stylesheet" type="text/css" href="jquery.popup.css"/>
    <script type="text/javascript" charset="utf-8" src="jquery.js"> </script>
    <script type="text/javascript" charset="utf-8" src="jquery.dimensions.js"> </script>
    <script type="text/javascript" charset="utf-8" src="jquery.popup.js"> </script>
    </head><script type="text/javascript">
    jQuery(function($){
        $("input.popup").popup('<a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');    $("#ding").focus(function(){
            //只知道有个focus，不知道focusout是什么东西
            $("#hztable").append(' <input id="dganwei' + (++i) + '" type="text" class="popup" value="1" />');
            $("#dganwei" + i).popup(' <a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');
            //$("input.popup").popup(' <a href="#">demo1Text </a> <br /> <a href="#">demo2Text </a>');
        });
    });
    var i = 2;
    </script><body>
    <div id="hztable">
      <input id="danwei1" type="text" class="popup" value="1" />
      <input id="danwei2" type="text" class="popup" />
      <br/>
      <input type="text" />
    </div><table width="10%" border=1 align="center" cellpadding="0" cellspacing="0" id="mxtable" >
    <tr align="center">
    <td>name <input id="ding" name="ding" type="text" maxlength="10" /> </td>
    </tr>
    </table></body>
    </html>
      

  3.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://www.cnjquery.com/demo/jquery.js"></script>
    <style type="text/css">
    body{background:#FFFFFF;}
    </style>
    </head>
    <body>
    <script>
    $(document).ready(
    function()
    {
            var show_count = 20;   //要显示的条数
            var count = $("input:text").val();    //递增的开始值，这里是你的ID
            var fin_count = parseInt(count) + (show_count-1);   //结束递增的条件
      
            $("input:button").click(
                    function()
                    {
                            if(count < fin_count)    //点击时候，如果当前的数字小于递增结束的条件
                            {
                                    $("tr:eq(1)").clone().appendTo("table");   //在表格后面添加一行
                                    $("tr:last td input:first").val(++count);   //改变添加的行的ID值。
                            }
                    }
            );
    }
    );</script>
    <input type="button" value="添加一行" />
    <table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
      <tr>
        <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
        <td align="center" bgcolor="#CCCCCC">Username</td>
        <td align="center" bgcolor="#CCCCCC">Usertype</td>
        <td align="center" bgcolor="#CCCCCC">Other</td>
      </tr>
      <tr>
        <td height="30" align="center"><input type="text" size="2" value="1" /></td>
        <td align="center"><input type="text" name="username" /></td>
        <td align="center">
          <select name="type">
       <option value="1">Administrator</option>
       <option value="2">Guest</option>
          </select>
        </td>
        <td align="center"><input type="text" name="username2" /></td>
      </tr>
    </table>
    </body>
    </html>