js动态的在页面上增加或删除三个文本框并换行

下面的代码能实现点击一个按钮一次增加三个文本框。但我想要三个文本框之间不要换行，三个文本框之后必须换行。即点一下按钮换一行。请高人指点一下。<html><head><ti... 下面的代码能实现点击一个按钮一次增加三个文本框。但我想要三个文本框之间不要换行，三个文本框之后必须换行。即点一下按钮换一行。请高人指点一下。
<html>
<head>
<title>js动态的在页面上增加或删除一个文本框</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1a: <input type="text" name="txt1" id="txt1" /></label>

<p>
<input type="button" value="Add Textbox" onClick="addTextBox(this.form,this.parentNode); " />
<input type="button" value="Remove Textbox" onClick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html> 展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

网海1书生

科技发烧友

2018-08-22 · 擅长软件设计、WEB应用开发、小程序

网海1书生

采纳数：12311 获赞数：26226

向TA提问私信TA

关注

展开全部

<html>
<head>
<title>js动态的在页面上增加或删除一个文本框</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++;
// Create the label
var p = document.createElement("p");
p.id="txt"+textNumber;
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","biaozhundaan"+textNumber);
textField.setAttribute("id","biaozhundaan"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("第"+textNumber+"空: "));
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField);
// Add it all to the form fengshu
p.appendChild(label);
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","pingfengA"+textNumber);
textField.setAttribute("id","pingfengA"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("评分词"+textNumber+": "));
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField);
// Add it all to the form
p.appendChild(label);
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","fengshu"+textNumber);
textField.setAttribute("id","fengshu"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("分数"+textNumber+": "));
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField);
// Add it all to the form
//
p.appendChild(label);
form.insertBefore(p,afterElement);
return false;
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
// Remove the last one added
form.removeChild(document.getElementById("txt"+textNumber));
textNumber--;
}
}
//-->
</script>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1a: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" onClick="addTextBox(this.form,this.parentNode); " />
<input type="button" value="Remove Textbox" onClick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js动态的在页面上增加或删除三个文本框并换行

为你推荐：