html中实现添加输入框怎么实现? 譬如: 以前的QQ上传照片当你点击上传时会出现5个输入框,在这个输入框中你可以选择照片的路径.当还有照片要上传时就点击添加,便会再出现一个输入框你可以再输入5张照片的地址.这个怎么实现啊?有没有代码? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><script language="JavaScript" type="text/JavaScript"> function addtext(){ var threadsCount = document.getElementById("addtexta").value; //threadsCount 表示你要插入的个数 if(threadsCount!=''&&parseInt(threadsCount)>0){ var tr=document.createElement("tr"); tr.id=1; var td; for(var i=1;i<=10;i++){ td=document.createElement("td"); td.id=tr.id+"/"+i; td.width="10%"; td.appendChild(document.createTextNode("")); tr.appendChild(td); } document.getElementById("newbody").appendChild(tr); tr=document.createElement("tr"); tr.id=2; for(var i=1;i<=parseInt(threadsCount);i++){ td=document.createElement("td"); td.id=tr.id+"/"+i+1; var btn; if(i<10){ btn = document.createElement("<INPUT type='file' id='thread0"+i+"' name='thread0"+i+"' value='thread0"+i+"'>"); } td.appendChild(btn); td.align="left"; tr.appendChild(td); if(i%10==0&&i!=1){ document.getElementById("newbody").appendChild(tr); tr=document.createElement("tr"); tr.id=i/10+2; } } document.getElementById("newbody").appendChild(tr); } }</script><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><INPUT type='button' id='addtext' name='addtext' value='addtext' onclick="addtext()"><INPUT type='text' id='addtexta' name='addtexta' value='1'><table align="center" width="80%" id="loglst" width="80%" border="0" cellspacing="0" cellpadding="0"> <tbody id="newbody"></tbody></table></BODY></HTML>应该能满足要求。输入框数字你改几就是几个了 再发个兼容ff的:<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <script type="text/javascript"> var divfiles; function addFileInput() { divfiles=document.getElementById("divfiles"); var filesCount=divfiles.childNodes.length; if(filesCount==1) { document.getElementById("remove").style.visibility="visible"; } else if(filesCount==4) { document.getElementById("add").style.visibility="hidden"; } var fileInput="<div>第"+(filesCount+1)+"个文件:<input name=\"myfile\" type=\"file\"/></div>"; divfiles.insertAdjacentHTML("beforeEnd",fileInput); } function removeLastInput() { var filesCount=divfiles.childNodes.length; if(filesCount==2) { document.getElementById("remove").style.visibility="hidden"; } else if(filesCount==5) { document.getElementById("add").style.visibility="visible"; } divfiles.removeChild(divfiles.lastChild); } </script></head><body> <form id="form1" runat="server" enctype="multipart/form-data"> <div> <table > <tr> <th colspan="2">多文件上传</th> </tr> <tr> <td valign="top">上传文件</td> <td> <div id="divfiles"> <div><input id="File1" name="myfile" type="file" /> <a id="add" href="javascript:addFileInput()">添加</a> <a id="remove" style="visibility:hidden" href="javascript:removeLastInput()">移除</a></div> </div></td> </tr> <tr> <td></td> <td><input id="Button1" runat="server" onserverclick="Button1_ServerClick" type="button" value="上传" /></td> </tr> </table> </div> </form></body></html> 简单的方法就是先做好这5个,然后设置为不可见,用的时候把visible 改成可见 <html><head><title></title><script type="text/javascript">var num=1;//行的初始idvar rowNum=5;//一次添加的个数function $(elem){ return typeof elem=="string"?document.getElementById(elem):elem;}function addText(){ var tab=$("tab"); var row=tab.insertRow(-1); row.id="row"+num; var cell1=row.insertCell(-1); cell1.innerHTML="<INPUT type='file' id='file"+num+"'>"; num++; }function init_table(){ for(var i=0;i<5;i++) { addText(); }}</script></head><body onload="init_table();"><table id="tab" border=1 width=200px ></table><input type="button" onclick="addText()" value="add"></body></html> 用jauery,以前我写过。忘了。 web即时通信长连接问题 在IE中可以通过dialogArguments获得参数,那么其他浏览器呢,除了open 求一个计算全倒问题 脚本自动切换图片新闻 a标记上用confirm 加载页面时候如何判断本页面是新打开的还是点F5或是右键刷新的? 函数内部的 event 赋值问题,怎样捕获event 如何列举表格内所有行的第1列的内容 怎样传参..... 如何通过单击事件,往已有的表格里插入列(原始表格为1行1列) 涉及JAVASCRIPT的网页怎样传参数? 求救关于textarea控件的JS问题
<HTML>
<HEAD>
<script language="JavaScript" type="text/JavaScript">
function addtext(){
var threadsCount = document.getElementById("addtexta").value; //threadsCount 表示你要插入的个数
if(threadsCount!=''&&parseInt(threadsCount)>0){
var tr=document.createElement("tr");
tr.id=1;
var td;
for(var i=1;i<=10;i++){
td=document.createElement("td");
td.id=tr.id+"/"+i;
td.width="10%";
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild(tr);
tr=document.createElement("tr");
tr.id=2;
for(var i=1;i<=parseInt(threadsCount);i++){
td=document.createElement("td");
td.id=tr.id+"/"+i+1;
var btn;
if(i<10){
btn = document.createElement("<INPUT type='file' id='thread0"+i+"' name='thread0"+i+"' value='thread0"+i+"'>");
}
td.appendChild(btn);
td.align="left";
tr.appendChild(td);
if(i%10==0&&i!=1){
document.getElementById("newbody").appendChild(tr);
tr=document.createElement("tr");
tr.id=i/10+2;
}
}
document.getElementById("newbody").appendChild(tr);
}
}
</script>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""></HEAD><BODY>
<INPUT type='button' id='addtext' name='addtext' value='addtext' onclick="addtext()">
<INPUT type='text' id='addtexta' name='addtexta' value='1'>
<table align="center" width="80%" id="loglst" width="80%" border="0"
cellspacing="0" cellpadding="0">
<tbody id="newbody"></tbody>
</table></BODY>
</HTML>
应该能满足要求。输入框数字你改几就是几个了
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
var divfiles;
function addFileInput() {
divfiles=document.getElementById("divfiles");
var filesCount=divfiles.childNodes.length;
if(filesCount==1) {
document.getElementById("remove").style.visibility="visible";
} else if(filesCount==4) {
document.getElementById("add").style.visibility="hidden";
}
var fileInput="<div>第"+(filesCount+1)+"个文件:<input name=\"myfile\" type=\"file\"/></div>";
divfiles.insertAdjacentHTML("beforeEnd",fileInput);
}
function removeLastInput() {
var filesCount=divfiles.childNodes.length;
if(filesCount==2) {
document.getElementById("remove").style.visibility="hidden";
} else if(filesCount==5) {
document.getElementById("add").style.visibility="visible";
}
divfiles.removeChild(divfiles.lastChild);
}
</script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div>
<table >
<tr>
<th colspan="2">多文件上传</th>
</tr>
<tr>
<td valign="top">上传文件</td>
<td>
<div id="divfiles">
<div><input id="File1" name="myfile" type="file" /> <a id="add" href="javascript:addFileInput()">添加</a> <a id="remove" style="visibility:hidden" href="javascript:removeLastInput()">移除</a></div>
</div></td>
</tr>
<tr>
<td></td>
<td><input id="Button1" runat="server" onserverclick="Button1_ServerClick" type="button"
value="上传" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript">
var num=1;//行的初始id
var rowNum=5;//一次添加的个数
function $(elem)
{
return typeof elem=="string"?document.getElementById(elem):elem;
}
function addText()
{
var tab=$("tab");
var row=tab.insertRow(-1);
row.id="row"+num;
var cell1=row.insertCell(-1);
cell1.innerHTML="<INPUT type='file' id='file"+num+"'>";
num++;
}
function init_table()
{
for(var i=0;i<5;i++)
{
addText();
}
}
</script>
</head>
<body onload="init_table();">
<table id="tab" border=1 width=200px >
</table>
<input type="button" onclick="addText()" value="add">
</body>
</html>