动态地将一些文本和文本框添加到现有网页

时间:2011-11-07 16:11:44

标签: javascript jquery

我正在尝试动态地在每个文本框的前面创建一些带有特定标题的文本框。

我希望实际的jquery代码创建文本框和标签,以便位于以下for循环中---

function addelements(){

    jQuery('<form action="test" id="data-form" name="data-form" method="POST" onsubmit="senddatafinal();">  <p> This is a new form </p><br />First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" />').appendTo('body');
    for(i=0; i<=3; i++)
    {      
         textmessage= "This is element # " + (i+1);
         fieldname= "field_" + (i+1);
     //now add code to show label stored in 'textmessage' 
     //to the form 'data-form'
     //now add code to show text box with name stored in 'fieldname' 
     //to the form 'data-form'
    }
}

2 个答案:

答案 0 :(得分:0)

您始终可以使用表格来简化。

$('[id$=yourtable] > tbody:last').append('<input...>Label');

答案 1 :(得分:0)

http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

找到以下代码(根据我的要求稍作修改)

代码----

<script type="text/javascript">

$(document).ready(function(){

  var counter = 1;

$("#addButton").click(function () {



var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });
});
</script>