如何实现动态增加文本框问题

xyy7309 2009-09-14 02:45:05
在条件列表里 S M L XL　（这字段内容是从数据库表读取显示的）

如点击“S”在下方增加2个文本框“尺码： S 数量： ”

如点击“L”在下方增加2个文本框“尺码： L 数量： ”

这个原理应该怎么做？

请高手指教，先为感谢！
...全文
145 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
xyy7309 2009-09-27
  • 打赏
  • 举报
 回复
qing jiao
knightcjq 2009-09-27
  • 打赏
  • 举报
 回复
jquery dom操作
xyy7309 2009-09-20
  • 打赏
  • 举报
 回复
请帮助我的朋友,联系Q:272738287
xyy7309 2009-09-16
  • 打赏
  • 举报
 回复
谢谢大家的指导，，，可惜原理不是这样的！


尺码字段是从数据库读取用重复区域显示的，而不静态的按钮，原理跟８楼的朋友做的差不多，可不知道如何实现将数值提交到数据库对应字段里．．．．
请各位高手多多指教！提供个详细的代码．．
xyy7309 2009-09-16
  • 打赏
  • 举报
 回复
在这里先感谢大家,特别是BeenZ...
郁闷,还是不知道如何实现提交,,,请帮助我的朋友,联系Q:272738287

BeenZ 2009-09-16
  • 打赏
  • 举报
 回复 


<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <META http-equiv="Content-Style-Type" content="text/css">

        <script language="javascript">

            var sizeToUpdate=[];//用这个数组保存你要的值,然后提交给数据库

            for(var i=0;i<4;i++){

                sizeToUpdate[i]=[];

            }

            function addInput(id){

                var div=document.getElementById("inputDiv")

                var input="<div id=div"+id+">尺码<input type=text value="+id+" name="+id+"1>数量<input type=text name="+id+"></br></div>"

                id++;

                div.innerHTML+=input;

            }

            function submit(){

                var div=document.getElementById("inputDiv");

                sizeToUpdate[0]= document.getElementsByName("S");

                for(var i=1;i<sizeToUpdate[0].length;i++){

                    alert(sizeToUpdate[0][i].value)  //得到所有的S值

                }

                sizeToUpdate[1]= document.getElementsByName("M");

                for(var i=1;i<sizeToUpdate[1].length;i++){

                    alert(sizeToUpdate[1][i].value)  //得到所有的M值

                }

                sizeToUpdate[2]= document.getElementsByName("L");

                for(var i=1;i<sizeToUpdate[2].length;i++){

                    alert(sizeToUpdate[2][i].value)  //得到所有的L值

                }

                sizeToUpdate[3]= document.getElementsByName("XL");

                for(var i=1;i<sizeToUpdate[3].length;i++){

                    alert(sizeToUpdate[3][i].value)  //得到所有的XL值

                }

            }



            window.onload=function(){



            }





        </script>

    </head>

    <body>



    </div>

    <div><input type="button" id="s" value="S" onclick="addInput(this.value)"> <input type="button" id="m"  value="M" onclick="addInput(this.value)"> <input type="button" id="l" value="L" onclick="addInput(this.value)"> <input type="button" id="xl" value="XL" onclick="addInput(this.value)"></div>

    <div><FONT face="宋体"></FONT></div>

    <div id="inputDiv"> </div>

    <input type="button" value="提交" onclick="submit()">

</body>

</html>
xyy7309 2009-09-16
  • 打赏
  • 举报
 回复
请各位高手多多指教！
redsnow_007 2009-09-14
  • 打赏
  • 举报
 回复
建议多看看javascript如何操作dom的
这样才是治本的方法
syjeffdyg 2009-09-14
  • 打赏
  • 举报
 回复
貌似不难吧，javascript很容易做啊。直接控制size不就行了？
BeenZ 2009-09-14
  • 打赏
  • 举报
 回复 


<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <META http-equiv="Content-Style-Type" content="text/css">

        <script language="javascript">

            var id=1;

            function addInput(id){

                var div=document.getElementById("inputDiv")

                var input="<div id=div"+id+">尺码<input type=text value="+id+">数量<input type=text ></br></div>"

                id++;

                div.innerHTML+=input;

            }





            window.onload=function(){

                

            }





        </script>

    </head>

    <body>

       

        </div>

        <div><input type="button" id="s" value="S" onclick="addInput(this.value)"> <input type="button" id="m"  value="M" onclick="addInput(this.value)"> <input type="button" id="l" value="L" onclick="addInput(this.value)"> <input type="button" id="xl" value="XL" onclick="addInput(this.value)"></div>

        <div><FONT face="宋体"></FONT></div>

         <div id="inputDiv"> </div>

    </body>

</html>
xyy7309 2009-09-14
  • 打赏
  • 举报
 回复
请高手指导！！！！
xyy7309 2009-09-14
  • 打赏
  • 举报
 回复
各位要实现的是这样的结果:
MR丶CHAN 2009-09-14
  • 打赏
  • 举报
 回复
div显示与隐藏。
不耐烦 2009-09-14
  • 打赏
  • 举报
 回复
发现innerHTML 比节点好用多了.............
BeenZ 2009-09-14
  • 打赏
  • 举报
 回复 


<html>

	<head>

		<meta http-equiv="content-type" content="text/html; charset=utf-8">

		<META http-equiv="Content-Style-Type" content="text/css">

		<script language="javascript">

            var id=1;

            function addInput(){

                var div=document.getElementById("inputDiv")

                var input="<div id=div"+id+">尺码<input type=text >数量<input type=text ><input type=button onclick=addInput() value=\"+\"></br></div>"

                id++;

                div.innerHTML+=input;

            }



          

            window.onload=function(){

                 

            }

            



		</script>

	</head>

	<body>

		<div id="inputDiv"><div id="div0">尺码<input type="text" ID="Text1" NAME="Text1">数量<input type="text" ID="Text2" NAME="Text1"><input type="button" onclick="addInput()" value="+" ID="Button1" NAME="Button1"><BR>

			</div>

		</div>

		<div><FONT face="宋体"></FONT></div>

	</body>

</html>
liuwei_IT_love 2009-09-14
  • 打赏
  • 举报
 回复
用JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script langauge="javascript">
<!--
function piclist1(l){
var i=1;
piclist.innerHTML="";
while(i<=l){
piclist.innerHTML=piclist.innerHTML+" <font size='-1'>文件</font><font size='-1'>"+i+"</font>、<input type='file' name='filename"+i+"' onchange=s('"+i+"') style='width:430px' size='20'><input type='hidden' name='photohight"+i+"' size='10'><input type='hidden' name='photowidth"+i+"' size='10'>";
if(i<l){piclist.innerHTML=piclist.innerHTML+"<br>";}
i=i+1;
}
}
//-->
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 12px}
-->
</style>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#D8F0FF"><span class="STYLE1">请选择文件：</span></td>
<td bgcolor="#D8F0FF">
<span class="STYLE1">
<select size="1" onChange="piclist1(this.options[selectedIndex].value)" name="photocount">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span></td>
</tr>
<tr class="albtd07">
<td height="26" valign="top" bgcolor="#D8F0FF"><span class="STYLE1">选择照片：  </span></td>
<td colspan="3" height="26" bgcolor="#D8F0FF" id="piclist" style="line-height:200%;">
<span class="STYLE1"> 文件1、</span>
<span class="STYLE1">
<input type="file" name="filename1" onChange="s('1');" style="width:430px" size="20">
<input type="hidden" name="photohight1" size="10">
<input type="hidden" name="photowidth1" size="10">
</span></td>
</tr></table>
</form>
</body>
</html>
banana_97 2009-09-14
  • 打赏
  • 举报
 回复
用層來顯示就可以了.
javascript动态增加文本框
在JavaScript编程中，动态增加文本框是一项常见的交互功能，它允许用户在页面上根据需要添加额外的输入元素，而无需离开当前页面或进行页面刷新。这个功能常用于表单提交、数据输入等场景，比如创建多行文本输入、...
jquery实现动态添加文本框和下拉框效果
jquery实现动态添加文本框和下拉框效果。
js 实现表格中动态添加文本框
js 实现表格中动态添加文本框 及下及用，童叟无欺。
js动态生成文本框并有删除功能
### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档对象模型）是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框，...
jquery动态生成文本框，含删除按钮
`jquery.min.js`是jQuery库的压缩版本，它是实现动态生成文本框的关键依赖，因为我们需要用到jQuery提供的API来操作DOM。 在`demo.html`中，基本的实现流程可能如下： 1. **HTML结构**：创建一个基础的HTML结构，...
ASP

28,406

社区成员

356,946

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章