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

最新推荐文章于 2020-09-15 15:24:40 发布

csdy08

最新推荐文章于 2020-09-15 15:24:40 发布

阅读量756

点赞数

本文链接：https://blog.csdn.net/csdy08/article/details/81948652

版权

<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 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
  form.insertBefore(label,afterElement);
  
  
  
  var label = document.createElement("labe1");
  // 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
  form.insertBefore(label,afterElement);
  
  var d = document.createElement("br");
  var label = document.createElement("labe3");
  // 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
  label.appendChild(d);//换行
   
  form.insertBefore(label,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).parentNode);
   
   form.removeChild(document.getElementById("biaozhundaan"+textNumber).parentNode);
   form.removeChild(document.getElementById("pingfengA"+textNumber).parentNode);
   form.removeChild(document.getElementById("fengshu"+textNumber).parentNode);
	
    textNumber--;
  }
}
//-->
</script>
<style type="text/css">
<!--block 此元素将显示为块级元素,此元素前后会带有换行符
label {display:inline;}


-->
</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>

csdy08

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js动态的在页面上增加或删除三个文本框并换行

&lt;html&gt;&lt;head&gt;&lt;title&gt;js动态的在页面上增加或删除一个文本框&lt;/title&gt;&lt;script type="text/javascript"&gt;&lt;!--var textNumber = 1;function addTextBox(form, afterElement) { // Increment the..
复制链接

扫一扫