个人中心
gpt4 book ai didi

asp.net - 如何使用JQuery动态添加div？

转载 作者：行者123 更新时间：2023-12-03 22:59:24 25 4
gpt4 key购买 nike

我有以下 html，它显示 3 个文本框和一个添加按钮:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="line-item">
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox>
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" />
   </div>
   </div>
   </form>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
   /jquery.min.js">
   </script>
   <script src="js/invoice.js" type="text/javascript"></script>
</body>
</html>

当用户单击添加按钮时，我想使用行项目 id 创建另一个 div 并将其放在下一行。我创建了一个 js 文件，但我不知道该怎么做？

这是我到目前为止所拥有的:

var itemCount = 0;

function getLineItem(number) {
    var div = document.createElement('div');

   $(div).attr("id", "lineitem" + number);
   var t1 = getTextbox("txt" + number.toString() + "1");
   var t2 = getTextbox("txt" + number.toString() + "2");
   var t3 = getTextbox("txt" + number.toString() + "3");

   $(div).append(t1);
   $(div).append(t2);
   $(div).append(t3);

   return $(div);
}

function getTextbox(id) {
    var textbox = document.createElement('input');
    $(textbox).attr("id", id);
    return $(textbox);
}


var lineItemCount = 0;

   $('#imgBtnAddNewLineItem').click(function() {

    lineItemCount++;

   $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container');
    });
});

最佳答案 

$(document).ready(function() {
    $('#imgBtnAddNewLineItem').click(function() {
        $('#container').append('<div></div>');
    });
});

更新2

创建一个普通按钮，如下所示:

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" />

更新 ** 这也通过评论等进行更新.. **

//Count the lineItems to make sure they are unique
var lineItemCount = 0;

//On document ready 
$(document).ready(function() {
    //On button click
    $('#imgBtnAddNewLineItem').click(function(e) {
        /*
           ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK
           P.S. - Make sure you pass -e- to this function... 

         */
         e.preventDefault();



         //Increase the lineitemcount
         lineItemCount++;
         //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids
         $(container).append(getLineItem(lineItemCount));
    });
});

//Create a new DIV with Textboxes
function getLineItem(number) {
    var div = document.createElement('div');
    //Give the div a unique id

    div.setAttribute('id','lineitem_' + number);

    //pass unique values to the getTextbox() function
    var t1 = getTextbox('txt_' + number + '_1');
    var t2 = getTextbox('txt_' + number + '_2');
    var t3 = getTextbox('txt_' + number + '_3');

    div.appendChild(t1);
    div.appendChild(t2);
    div.appendChild(t3);

    return div;
}

//Create a textbox, make sure the id passed to this function is unique...
function getTextbox(id) {
    var textbox = document.createElement('input');
    textbox.setAttribute('id',id);
    textbox.setAttribute('name',id);
    return textbox;
}

关于asp.net - 如何使用JQuery动态添加div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/953415/

25 4 0
文章推荐： jquery - 是否可以使用 JQuery 选择页面上的所有 float ？
文章推荐： jQuery PrettyPhoto 将 ID 传递给 iframe
文章推荐： jQuery 选择器
文章推荐： jquery - 当 MasterPage 位于根文件夹中时在子文件夹中使用 JQuery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com