如何动态创建
|
我想在我的Web表单中动态创建输入类型的文本。更具体地说，我有一个文本字段，用户可以在其中输入所需的文本字段的数量；我希望文本字段以相同的形式动态生成。
我怎么做？
没有找到相关结果
已邀请:
9 个回复
扑北爱
苦诫
和。然后，您可以使用将创建的元素附加到所需的父元素。昧伎
。郸身
$(\'<input/>\').attr({type:\'text\',name:\'text\'+i}).appendTo(\'#myform\');var count = 20; var html = []; while(count--) { html.push(\"<input type=\'text\' name=\'name\", count, \"\'>\"); } $(\'#myform\').append(html.join(\'\'));凄嘛姥
方法创建该文本框邵酮
$(function() { var scntDiv = $(\'#p_scents\'); var i = $(\'#p_scents p\').size() + 1; $(\'#addScnt\').live(\'click\', function() { $(\'<p><label for=\"p_scnts\"><input type=\"text\" id=\"p_scnt\" size=\"20\" name=\"p_scnt_\' + i +\'\" value=\"\" placeholder=\"Input Value\" /></label> <a href=\"#\" id=\"remScnt\">Remove</a></p>\').appendTo(scntDiv); i++; return false; }); $(\'#remScnt\').live(\'click\', function() { if( i > 2 ) { $(this).parents(\'p\').remove(); i--; } return false; }); });枫湃揩乾纲
禽兢玫坞劲
function fun() { /*getting the number of text field*/ var no = document.getElementById(\"idname\").value; /*text fields to be generated dynamically in the same form*/ for(var i=0;i<no;i++) { var textfield = document.createElement(\"input\"); textfield.type = \"text\"; textfield.id = \"idname4textfeild\"; textfield.setAttribute(\"value\",\"\"); document.getElementById(\'form\').appendChild(textfield); } }<form id=\"form\"> <input type=\"type\" id=\"idname\" oninput=\"fun()\" value=\"\"> </form>僻朵庙惩竣
var inputs = [ `<input type=\'checkbox\' id=\'chbox0\' onclick=\'checkboxChecked(this);\'> <input type=\'text\' class=\'noteinputs0\'id=\'note` + 0 + `\' placeholder=\'task0\'><button id=\'notebtn0\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 1 + `\' placeholder=\'task1\'><button class=\'notebuttons\' id=\'notebtn1\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 2 + `\' placeholder=\'task2\'><button class=\'notebuttons\' id=\'notebtn2\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 3 + `\' placeholder=\'task3\'><button class=\'notebuttons\' id=\'notebtn3\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 4 + `\' placeholder=\'task4\'><button class=\'notebuttons\' id=\'notebtn4\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 5 + `\' placeholder=\'task5\'><button class=\'notebuttons\' id=\'notebtn5\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 6 + `\' placeholder=\'task6\'><button class=\'notebuttons\' id=\'notebtn6\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 7 + `\' placeholder=\'task7\'><button class=\'notebuttons\' id=\'notebtn7\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 8 + `\' placeholder=\'task8\'><button class=\'notebuttons\' id=\'notebtn8\' >creat</button>`, `<input type=\'text\' class=\'noteinputs\' id=\'note` + 9 + `\' placeholder=\'task9\'><button class=\'notebuttons\' id=\'notebtn9\' >creat</button>` ].sort().join(\" \"); document.querySelector(\'#hi\').innerHTML += `<br>` +inputs;