如何动态添加textbox (Jquery)

看了一点Jquery的入门
现在想写一段动态添加textbox的代码
1.目前实点击"增加一栏"按钮,会新增加一行<tr>,其实是两个<td>
2.我想实现,点一下"增加一栏"按钮就增加一行,再点一下,再增加一行,再点再增加....
 var input = $("<td><input type='text' value=' /></td>");   --------这一行我是不是得写成.
 var input = $("<td><input type='text' value=' id='"+id+"' /></td>"); 
但是这个id是每个文本框的都不一样吧?
得怎么处理呢?要不一会取值就只能取第一个值了.
JS文件如下:
//新增加一栏
$(function () {    // 相当于在页面中的body标签加上onload事件
    $(".addTextBox").click(function () {          var input = $("<td><input type='text' value=' /></td>"); // 文本框1的HTML代码
        var input2 = $("<td><input type='text' value='100' /></td>"); // 文本框2的HTML代码
        $(".textboxCpxh1").html(input);  
        $(".textboxCpsl1").html(input2);    })
})
web页面代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %><!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 runat="server">
    <title>无标题页 </title>
    <%--              <script>
                  var i = 0;
                  function setDiv() {
                      var Ddiv = document.getElementById("divInfo ");
                      Ddiv.innerHTML += ' <input   type= "text"   name= "txt_" '+ i + 'id= "txt_ " ' + i + '   value= ' + i + '   />  '
                      i++;
                  } 
              
              </script>  --%>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/AddPro.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="1px" style="bgcolor: #e4e4e4">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <a href="#"><span class="addTextBox">增加一栏</span></a>
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    型号
                </td>
                <td>
                    数量
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    <asp:TextBox ID="textboxCpxh" runat="server" Width="200px"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="textboxCpsl" runat="server" Width="200px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td class="textboxCpxh1">
                    &nbsp;
                </td>
                <td class="textboxCpsl1">
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    function addRow(){
    $('#tb_commodity').append(
    "<tr><td><input type='text' size='20'/></td><td><button name='btn_add' onclick='delRow(this)'"+
    " class='bt1_mouseout' onmouseover='this.className=\"bt1_mouseover\"' onmouseout='this.className=\"bt1_mouseout\"'>删除</button></td></tr>");
    }
    function delRow(a){
    alert($(a).get(0));
    $(a).parent().parent().remove();
    }
      

  2.   

    function addRow(p_strTBId,p_arrTemplate){   
     //------------------------------------   
     //@function addRow   
     //@inf 给指定表格ID为：p_strTBId新增一行   
     //@param string:p_strTBId      表格id   
     //@param array:p_arrTemplate   所有列的模板，列中的内容，为html   
     //@return false:操作失败，遇到错误!   
     //@author 叶立国   
     //@date 2010-9-29   
     //------------------------------------   
        
        
        var tbMain;   
        
        if(p_strTBId==null || p_strTBId.length<1){   
            return false;   
        }   
        
        tbMain=document.getElementById(p_strTBId);   
        
        if(tbMain==null){   
            return false;   
        }   
           
        var newTr = tbMain.insertRow(-1);//添加行   
      
        try{   
            //设置新增表格，如何已存在则不会新增   
            setTable(p_strTBId);   
               
            Table_indexs[getTableIndex(p_strTBId)]++;   
      
            //alert(Table_indexs[getTableIndex(p_strTBId)]);   
            for (var i=0;i<p_arrTemplate.length;i++){   
                var newTd=newTr.insertCell(-1);   
                var tmp=p_arrTemplate<i>;   
                if(tmp.indexOf("{%id%}")>1){   
                    tmp=p_arrTemplate<i>.replace("{%id%}",Table_indexs[getTableIndex(p_strTBId)]+"_"+i);   
                }   
                if(tmp.indexOf("{%id%}")>1){   
                    tmp=tmp.replace("{%id%}",Table_indexs[getTableIndex(p_strTBId)]+"_"+i);   
                }   
                newTd.innerHTML=tmp;   
                newTd.className="border_top";   
                if(i!=0){   
                    newTd.className=newTd.className+" border_left";   
                }   
            }   
        }catch(e){   
      
        }   
        return true;   
    }   
    更多的js操作表格函数查看http://www.1c2c.com.cn/topic.aspx?topicid=86