Js实现动态插入删除文本框

最新推荐文章于 2021-06-09 19:31:28 发布

于大大大洋

最新推荐文章于 2021-06-09 19:31:28 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript 文章标签： js动态添加文本框

本文链接：https://blog.csdn.net/arrowzz/article/details/40981631

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

自己做了个Js插入文本框的例子，扔上别忘了。

<html>

	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html;   charset=utf-8">
		<script language="javascript">
			var qus = new Array();

			function Question() {
				this.qno = qus.length;
				this.ono = 0;
				this.create = function(table) {
					var qstr = "";
					qstr += "<hr id=\"qu" + this.qno + "div\"><div id=\"qu" + this.qno + "\"><h2>问题  " + (this.qno + 1) + "</h2>";
					qstr += "<input type=\"text\" name=\"questions[" + this.qno + "]\" value=\"questions[" + this.qno + "]\" />";
					qstr += "<div id=\"qu" + this.qno + "op\"><b>* 选项 *</b>";
					qstr += "<br /><input type=\"text\" value=\"qu" + this.qno + "op" + this.ono + "\" id=\"qu" + this.qno + "op" + this.ono + "\"/>";
					qstr += "</div>";
					qstr += "<input type=\"button\" value=\"增加选项\" οnclick=\"qus[" + this.qno + "].addOption()\"/>";
					qstr += "<input type=\"button\" value=\"刪除选项\" οnclick=\"qus[" + this.qno + "].delOption()\"/>";
					qstr += "</div>";
					table.innerHTML += qstr;
					//alert(qstr);
				}
				this.addOption = function() {
					this.ono++;
					var opar = document.getElementById("qu" + this.qno + "op");
					opar.innerHTML += "<br id=\"qu" + this.qno + "op" + this.ono + "div\"/><input type=\"text\" value=\"qu" + this.qno + "op" + this.ono + "\" id=\"qu" + this.qno + "op" + this.ono + "\"/>";
					//alert(opar.innerHTML);
				}
				this.delOption = function() {
					if (this.ono > 0) {
						var quop = "qu" + this.qno + "op";
						var opx = "qu" + this.qno + "op" + this.ono;
						document.getElementById(quop).removeChild(document.getElementById(opx));
						document.getElementById(quop).removeChild(document.getElementById(opx + "div"));
						this.ono--;
					}
				}
			}

			function createQuestion() {
				var qu = new Question();
				qus.push(qu);
				qu.create(document.getElementById('table'));
			}

			function delQuestion() {
				if (qus.length > 0) {
					var qupr = "table";
					var qux = "qu" + (qus.length - 1);
					document.getElementById(qupr).removeChild(document.getElementById(qux));
					document.getElementById(qupr).removeChild(document.getElementById(qux + "div"));
					qus.pop();
				}
			}
		</script>
	</head>

	<body>
		<div id="table"></div>
		<br />
		<hr />
		<br />
		<input type="button" οnclick="createQuestion();" value="新建问题" />
		<input type="button" οnclick="delQuestion();" value="删除问题" />
		<input type="submit" value="保存问卷" />
	</body>

</html>