请问使用有一组TextBox，（最多显示5组，最少一组），想通过“增加”，“删除”按钮来添加，减少一组TextBox，请问大家如何使用javascript实现？

bolome 2008-09-10 10:37:45
请问有一组TextBox，（最多显示5组，最少一组），想通过“增加”，“删除”按钮来添加，减少一组TextBox，请问大家如何实现？
是将5组先做好一个一个显示呢？还是一组一组的代码生成？？有谁看到过这个例子的说说啊？？
javascript实现
...全文
250 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
bolome 2008-09-16
  • 打赏
  • 举报
 回复
谢谢了
dln1234 2008-09-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 bolome 的回复:]
我将输入框放在DIV中，做成五个DIV中，通过DIV的visible属性来控制是否显示，但是我无论是设成 <div visible="true">，
还是 <div visible="false">都没有反应。请问是怎么回事？》
[/Quote]


div 显示style='display:none';是隐藏
显示style='display:block';显示默认是显示

斯洛文尼亚旅游 2008-09-12
  • 打赏
  • 举报
 回复 
<select id="Select_P">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option></select>

       <div id="div_cjr_1">1

           </div>

<div id="div_cjr_2">2

           </div>

<div id="div_cjr_3">3

           </div>

<div id="div_cjr_4">4

           </div>

<div id="div_cjr_5">5

           </div> 



<script>

window.onload=initForm;

window.onunload=function() {};



function initForm()

{

   document.getElementById("Select_P").selectedIndex=0;

  for(i=2;i<=5;i++)

  {

    document.getElementById("div_cjr_"+i).style.display="none";//隐藏2-5，因为你上面设置了只显示1个div

  }

   document.getElementById("Select_P").onchange=changnum;

}



function changnum()

{

  var newnum=parseInt(document.getElementById("Select_P").value);

  var i,j;

  for(i=1;i<=newnum;i++)

  {

    document.getElementById("div_cjr_"+i).style.display="block";//显示

  }

  for(j=i;i<=5;i++)

  {

    document.getElementById("div_cjr_"+j).style.display="none";//隐藏

  }

}

</script>
bolome 2008-09-12
  • 打赏
  • 举报
 回复 
<select id="Select_P">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option></select>

       <div id="div_cjr_1">

           </div>

<div id="div_cjr_2">

           </div>

<div id="div_cjr_3">

           </div>

<div id="div_cjr_4">

           </div>

<div id="div_cjr_5">

           </div> 

window.onload=initForm;

window.onunload=function() {};



function initForm()

{

   document.getElementById("Select_P").selectedIndex=0;

   document.getElementById("Select_P").onchange=changnum;

}



function changnum()

{

  var newnum=document.getElementById("Select_P");

  

  for(var i=0;i<newnum;i++)

  {

    div_cjr_[i].style.display="block";//显示

  }

  

}

选择列表怎么没反应呢？？
斯洛文尼亚旅游 2008-09-12
  • 打赏
  • 举报
 回复 
<div style="visibility:hidden" >111</div>




//是style.visibility，不是div.visible

div.style.visibility="visible";

div.style.visibility="hidden";



div.style.display="none"//隐藏

div.style.display="block"//显示


建议使用style.display，使用visibility的话会占位置
bolome 2008-09-12
  • 打赏
  • 举报
 回复
如何通过javascript来控制？
bolome 2008-09-12
  • 打赏
  • 举报
 回复
我将输入框放在DIV中，做成五个DIV中，通过DIV的visible属性来控制是否显示，但是我无论是设成<div visible="true">，
还是<div visible="false">都没有反应。请问是怎么回事？》
bolome 2008-09-12
  • 打赏
  • 举报
 回复
谢谢楼上各位!!!不过跟我的票求对不上.是我没说清楚.
有一组输入框(三个TextBox,两个DropdownList),最少显示一组.通过增加,删除按钮来显示一组至五组输入框．最多显示五组．
dln1234 2008-09-10
  • 打赏
  • 举报
 回复
小例子：
<script type="text/javascript">
var p=1;
function pga(){p=p;return p;}
function Up_page(){if(p<=1)p=1;else p=p-1;return p;}
function Down_page(){if(p<5)p=p+1;return p;}
function bbb(aa)
{
var obj=document.getElementById("ccc");
var html="";
for(i=1;i<=aa;i++)
{
html+="<input type='textbox' name=user+'i+1'/>"
}
obj.innerHTML=html;
}
</script>
</head>
<body>
<div id="ccc"><input type='textbox' name=user1/></div>
<input type="button" value="添加" onclick="bbb(Down_page());"/>
<input type="button" value="删除" onclick="bbb(Up_page());"/>
</body>
</html>
chqipy 2008-09-10
  • 打赏
  • 举报
 回复
DOM操作节点吧
tantaiyizu 2008-09-10
  • 打赏
  • 举报
 回复
顶 小#
xiaojing7 2008-09-10
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
var CreateText=function(){
if(document.getElementsByName("num").length +1 >5)
{
alert("已经5个了，不能继续添加！");
return ;
}
var module=document.getElementById("textmoudle");
var a = document.createElement("input");
a.id="num"
a.type = "text";
a.value = "";
module.appendChild(a);
};
var DeleteText=function(){
if(document.getElementsByName("num").length ==1)
{
alert("已经剩下最后一个了，不要再删除了！谢谢！");
return ;
}
var module=document.getElementById("textmoudle");
var texts=document.getElementsByName("num");
//alert(texts.length);
module.removeChild(document.getElementsByName("num")[0]);
};
</script>
<BODY>
<input type="button" value="增加" onclick="CreateText()"/>
<input type="button" value="删除" onclick="DeleteText()"/>
<hr/>
<div id="textmoudle">

</div>
</BODY>
</HTML>
剑心永远OK 2008-09-10
  • 打赏
  • 举报
 回复 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>无标题文档 </title> 

<head>

</head> 

<script>

	var create_element = function()

	{

		var _input = document.createElement("input");

		var _button = document.createElement("input");

		var _del_button = document.createElement("input");

		_button.setAttribute("type","button");

		_button.setAttribute("value",'增加');

		_del_button.setAttribute("type","button");

		_del_button.setAttribute("value","删除");

		document.body.appendChild(_input);

		document.body.appendChild(_button);

		document.body.appendChild(_del_button);

	}

	

	var add_input = function()

	{

		var _input = document.createElement("input");

		_input.setAttribute("type","text");

		document.body.appendChild(_input);

	}

	

	var remove_input = function()

	{

		document.body.removeChild(document.body.lastChild);

	}

	

	window.onload = function()

	{

		create_element();

		if(document.all)

		{

			document.body.lastChild.previousSibling.attachEvent("onclick",add_input);

			document.body.lastChild.attachEvent("onclick",remove_input);

		}

		else

		{

			document.body.lastChild.previousSibling.addEventListener("click",add_input,false);

			document.body.lastChild.addEventListener("click",remove_input,false);

		}

	}

</script>

<body>



</body> 

</html>
xiaojing7 2008-09-10
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
var CreateText=function(){
var module=document.getElementById("textmoudle");
var a = document.createElement("input");
a.id="num"
a.type = "text";
a.value = "";
module.appendChild(a);
};
var DeleteText=function(){
var module=document.getElementById("textmoudle");
var texts=document.getElementsByName("num");
//alert(texts.length);
module.removeChild(document.getElementsByName("num")[0]);
};
</script>
<BODY>
<input type="button" value="增加" onclick="CreateText()"/>
<input type="button" value="删除" onclick="DeleteText()"/>
<hr/>
<div id="textmoudle">
<input id="num" type="text" value=""/>
<input id="num" type="text" value=""/>
</div>
</BODY>
</HTML>
====================
不好意思，我测试了，有点问题！这个是修改了下！
wxg22526451 2008-09-10
  • 打赏
  • 举报
 回复
JS操作表格,添加删除一组文本框的行
http://blog.chinaunix.net/u1/57965/showart_688399.html
bolome 2008-09-10
  • 打赏
  • 举报
 回复
好，谢谢。试一下！！！！
xiaojing7 2008-09-10
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
var CreateText=function(){
var module=document.getElementById("textmoudle");
var a = document.createElement("input");
a.id="num"
a.type = "text";
a.value = "";
module.appendChild(a);
};
var DeleteText=function(){
var module=document.getElementById("textmoudle");
var texts=document.getElementsByTagName("num");
module.removeChild(document.getElementsByTagName("num")[0]);
};
</script>
<BODY>
<input type="button" value="增加" onclick="CreateText()"/>
<input type="button" value="删除" onclick="DeleteText()"/>
<hr/>
<div id="textmoudle">
<input id="num" type="text" value=""/>
</div>
</BODY>
</HTML>
--------------------
没有测试！请测试下

xiaojing7 2008-09-10
  • 打赏
  • 举报
 回复

根据你个人需求了
可以控制隐:$("").style.visibility = "hidden"
也可以生成
createElement("");
appendChild();
dayit 2008-09-10
  • 打赏
  • 举报
 回复
楼上强啊，代码简单，结构清晰，当年我也是这样思考的，不过思路与楼上有差距，呵
使用ASP.NET Atlas开发随输入内容自动调整行数的textarea
作者：Dflying Chen (http://dflying.cnblogs.com )好多朋友使用过Outlook或者Windows Live Mail：在撰写新邮件时，您会发现初始的收件人文本框只有一行。但如果您输入了好多地址，超过了一行的长度，它会自动地变成两行，如果不够，还会变成三行，四行等。这种文本框既节约了初始空间，又让用户输入大量数据时不感到局促。为了让您对其有更直观的了解或是有些...
界面控件DevExtreme JS & ASP.NET Core 2024年度产品规划预览（二）
本文将介绍界面组件DevExtreme JS、DevExpress ASP.NET Core 2024年的产品规划，欢迎持续关注并下载组件体验~
只用一个Validator验证控件对Asp.Net页面的多个控件进行验证-asp.net关注
这个技巧是非常有用。如果我们有多个控件，我们只用一个验证控件来验证它 。这将减少页面大小和改善性能，因为每个验证控件在客户端都会被渲染成 span，如果一个页面包含上百个控件，就会使得页面非常的庞大臃肿。 在这篇文章的Demo中，动态创建的几个textbox，我只使用一个验证控件去验证它们。 1．aspx页面上：1 <body>2 <form id="form1" run...
使用ASP.NET Atlas开发随输入内容自动调整行数的textarea(转)
好多朋友使用过Outlook或者Windows Live Mail：在撰写新邮件时，您会发现初始的收件人文本框只有一行。但如果您输入了好多地址，超过了一行的长度，它会自动地变成两行，如果不够，还会变成三行，四行等。这种文本框既节约了初始空间，又让用户输入大量数据时不感到局促。为了让您对其有更直观的了解或是有些朋友没有用到过上述产品，请看下面的截图： ...
微信客服聊天界面仿制（聊天记录保存在本地数据库）
源码直接下载地址： https://pan.quark.cn/s/a4b39357ea24 在信息技术领域中，开发一个模仿微信客服交流平台的界面是一项普遍的需求，尤其是在构建企业级沟通工具时。这个名为"仿微信客服交流界面（具备聊天信息本地数据库存储功能）"的项目，致力于为用户创造一个类似于微信的互动体验，并且已经完成了聊天信息在本地数据库中的保存功能，以此保障信息的安全性和可恢复性。另外，项目还包含了网络传输的代码，旨在帮助开发者更好地理解和将此功能整合进自己的应用程序中。 现在让我们深入探究聊天界面的构建过程。微信客服交流界面通常由以下几个核心组件构成：用户个人照片、昵称展示、消息展示气泡、时间标记、输入区域以及发送控制键。这些组件需要经过细致的排布，以确保界面既清晰又便于使用。在用户界面设计方面，一般会采用 Material Design 或者 iOS 的 Human Interface Guidelines 来设计符合平台标准的界面。源代码文件 ChatUIDemo 可能包含了这一界面实现的代码，开发者可以通过查看和调整这个文件来个性化自己的聊天界面。 聊天信息在本地数据库中的存储是一项核心功能。在该项目中，或许选用了SQLite作为轻量级数据库，因为它易于集成，支持事务处理，适合存储结构化的数据，例如用户标识符、接收者标识符、消息内容、发送时刻等。通过运用SQL指令，能够执行数据的增加、删除、修改和查询操作，从而确保聊天记录的完整性和一致性。开发者可能需要关注如何将新接收到的消息添加到数据库中，以及如何从数据库中获取历史记录并在界面上进行展示。 在网络传输方面，可能通过HTTP或HTTPS协议来实现，并且使用了诸如AFNetworking（iOS）或O...
JavaScript

87,988

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章