急求~~！我也说不上来这个功能叫什么，谅解

先说下我的问题我是想实现一个页面可以任意多的文本框（也就是类似批量上传，但不是上传文件，而是让用户在文本框中添资料），点击增加按钮就页面就增加一个文本框，点击文本框后边的删除，此文本框就删除了，请问怎么实现？另外，实现此效果如何把值插到数据库呢？每个文本框的名字不一样还是什么原理？求教了~！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用javaScript 实现按下写一个文本框
这样的例子很多啊
<html>
<body>
<script language="javascript">

</script>
<form name="form">
<table id="tb"></table>
<input name="button" type=button onClick='additem("tb")' value="添加">
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
分好少..但还好我有一个现成的HTML文件,动态增减行
你直接把代码复制到一个HTML文件就可以看到效果了<html>
<head>
<title>动态新增减行</title>
</head><script type="text/javascript">
var nIndex = 0;   //大项的序号function addParentItem()
{
nIndex++;
var Ptbe = document.getElementById("ParentTable");
var tr = Ptbe.insertRow();
tr.id = "Prow"+ Ptbe.rows.length; //给总表的行的ID赋值
var ProwIndex = Ptbe.rows.length;
var str = "<table id='table"+nIndex+ "' name='theList"+nIndex+"'>"+
  "<tr><td  class='ListCellRow'><input type='text' name='itemId' value=''  /></td>"+
  "<td  class='ListCellRow'><input type='text' name='itemId' value='' /></td>"+
  "<td class='ListCellRow'><input type='text' name='itemId' value=''   /></td>"+
  "<td class='ListCellRow'><input type='text' name='itemId' value=''  /></td>"+
  "<td  class='ListCellRow'><input type='text' name='itemId' value=''  /></td>"+
  "<td  class='ListCellRow'><input type='text' name='itemId' value=''  /></td>"+
  "<td  class='ListCellRow'><a style='cursor:hand;color:blue' onclick='deleteParentItem("+ProwIndex+")'>删除</a></td>"+
"<td  class='ListCellRow'><a style='cursor:hand;color:blue' onclick='addItem("+nIndex+")'>增加小项</a></td></tr></table>";
tr.insertCell().innerHTML = str;
var tbe = document.getElementById("table"+nIndex);
}function addItem(index)
{
var tbe = document.getElementById("table"+index);
var tr = tbe.insertRow();
tr.id = "row"+ tbe.rows.length; //获取新增小项的序号,并增加ID
var rowIndex = tbe.rows.length;

tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<input type='text' name='itemId' value=''  />";
tr.insertCell().innerHTML = "<a style='cursor:hand;color:blue' onclick='deleteItem("+index+","+rowIndex+")'>删除</a>";
tr.insertCell().innerHTML = " ";

}
function deleteParentItem(ProwIndex)
{
var Ptbe = document.getElementById("ParentTable");
var Prow = document.getElementById("Prow"+ProwIndex); //找到要删除的大项
ProwIndex = Prow.rowIndex;
Ptbe.deleteRow(ProwIndex);   //获取要删除小项的序列号并删除
}
function deleteItem(index,rowIndex)
{
var tbe = document.getElementById("table"+index);
var row = document.getElementById("row"+rowIndex); //找到要删除的小项
RowIndex = row.rowIndex;
tbe.deleteRow(RowIndex);   //获取要删除小项的序列号并删除
}
</script>
<body>
<table id="ParentTable" width=1000 class=tableframe border="1" cellspacing="1" cellpadding="1" align="center">
<tr><td class="ListCellRow">工程量清单编号</td></tr>
<tr><td>
<table >
  <tr>
  <td width=100 class="ListCellRow">细目号</td>
  <td width=300 class="ListCellRow">细目名称</td>
  <td width=100 class="ListCellRow">单位</td>
  <td width=100 class="ListCellRow">数量</td>
  <td width=100 class="ListCellRow">单价</td>
  <td width=100 class="ListCellRow">合价</td>
  <td width=70><a style='cursor:hand;color:blue' onclick="addParentItem()">增加大项</a></td><td width=70></td>
  </tr>
</table>
</td></tr>
</table>
</body>
</html>
恰巧刚学了个，原理一般都是给标签内容追加标签，不过是用jQuery的 html()方法实现:<html>
<head runat="server">
    <title>无标题页</title>
    <script language="javascript" type="text/javascript" src="scripts/jquery-1[1].3.2.min.js"></script>
    <script language="javascript" type="text/javascript" >
        var count=0 ;
        function Add()
        {
            $("#Content").html($("#Content").html()+"<span id=t"+count+">"+"<br/>"+$("#s0").html()+"</span>");
            count++;
        }
        function Del()
        {
            count--;
            $("#t"+count).html("");

        }
    </script>
</head>
<body>
        <span id="s0">文本1:<input type="text" />文本2:<input type="text" /></span>
        <span id="Content"></span>
        <input type="button" onclick="Add();" value="增加" />
        <input type="button" value="删除" onclick="Del();" />
</body>
恰巧刚学了个，原理一般都是给标签内容追加标签，不过是用jQuery的 html()方法实现:<html>
<head runat="server">
    <title>无标题页</title>
    <script language="javascript" type="text/javascript" src="scripts/jquery-1[1].3.2.min.js"></script>
    <script language="javascript" type="text/javascript" >
        var count=0 ;
        function Add()
        {
            $("#Content").html($("#Content").html()+"<span id=t"+count+">"+"<br/>"+$("#s0").html()+"</span>");
            count++;
        }
        function Del()
        {
            count--;
            $("#t"+count).html("");

        }
    </script>
</head>
<body>
        <span id="s0">文本1:<input type="text" />文本2:<input type="text" /></span>
        <span id="Content"></span>
        <input type="button" onclick="Add();" value="增加" />
        <input type="button" value="删除" onclick="Del();" />
</body>

急求~~！ 我也说不上来这个功能叫什么，谅解

解决方案 »

急求~~！我也说不上来这个功能叫什么，谅解