如何动态添加textbox (Jquery)

ssson 2010-12-10 04:06:33

看了一点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>

                     

                </td>

                <td>

                    <a href="#"><span class="addTextBox">增加一栏</span></a>

                </td>

                <td>

                     

                </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>

                     

                </td>

                <td class="textboxCpxh1">

                     

                </td>

                <td class="textboxCpsl1">

                     

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

...全文

459 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

arduact 2010-12-27

打赏
举报

看看我也需要這個方面的知識

yejing889 2010-12-27

打赏
举报

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

wuyq11 2010-12-10

打赏
举报

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();
}