点击按钮，增加控件

Question

1、我想实现同时保存多本书的信息到数据库，因为不知道书的数量，初始化界面如下要求填写书的名称，单价，折扣，总价等
2、当点击加号按钮时变成下图又增加了一个书的填写框，填写书的名称，单价，折扣，总价等
3、再点击加号，又增加一个填写框，无限增加
请问怎么实现，增加完后台要能获取到控件里的值，在线等

Answer 1

javascript       clone()

Answer 2

第二张图，就跟csdn图片上传时那个加号功能类似

Answer 3

放到div里 clone 或者 innerhtml

Answer 4

用Javascript或者Jquery动态创建name属性有规律的input控件，后台使用Request.Form["控件Name"]取值

Answer 5

 protected void Page_Load(object sender, EventArgs e)
    {
        object count = ViewState["count"] ?? "0";
        int index;
        int.TryParse(count.ToString(), out index);
        TextBox txt;
        LiteralControl litc;
        for (int i = 0; i < index; i++)
        {
            txt = new TextBox();
            txt.ID = string.Format("txt{0}", i);
            txt.Text = (i + 1).ToString();
            ph.Controls.Add(txt);
            litc = new LiteralControl("<br />");
            ph.Controls.Add(litc);
        }    }
    protected void lbtnAdd_Click(object sender, EventArgs e)
    {
        object count = ViewState["count"] ?? "0";
        int index;
        int.TryParse(count.ToString(), out index);
        TextBox txt = new TextBox();
        txt.ID = string.Format("txt{0}", index);
        txt.Text = (index + 1).ToString();
        ph.Controls.Add(txt);
        ViewState["count"] = index + 1;
    }

Answer 6

这里只是列举了两个，你在自己增加修改
   <input id="add" type="button" value="+" />
    <div id="content">
        <div>
            <input id="ID" name="ID" type="text" />
            <input id="Name" name="Name" type="text" />
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById("add").onclick=function(){
            var content = document.getElementById("content");
            var len = content.getElementsByTagName("div").length;
            var newdiv = document.createElement("div")
            var id = document.createElement("input");
            id.type="text";
            id.name="ID"+len;
            newdiv.appendChild(id);
            var name = document.createElement("input");
            name.type="text";
            name.name="Name"+len;
            newdiv.appendChild(name);
            content.appendChild(newdiv);
        }
    </script>

Answer 7

function insertRow() {
    var rowindex=document.getElementById("rowindex").value;
    var otr=document.getElementById("myTable").insertRow(rowindex);
    var ocell=otr.insertCell(0);
    ocell.className="Layer183";
    ocell.align="center";
    ocell.innerHTML=" <input type='checkbox' name='cbxTaisyomei' id='cbxTaisyomei' caption='"+(rowindex) +"' />";
    var ocell=otr.insertCell(1);
    ocell.className="Layer183";
    ocell.align="center";
    ocell.innerHTML=" <input type='text' name='bland_info[]' id='bland_info[]' value='' caption='"+(rowindex) +"' style='width:280px;height:20px;font-size:15px;' />";
    var ocell=otr.insertCell(2);
    ocell.className="Layer180";
    ocell.align="center";
    ocell.innerHTML=" <input name='bland_info_num[]' id='bland_info_num[]' type='text' maxlength='3' value='0' style='width:20px;height:20px;text-align:center;'/>";
    document.getElementById("rowindex").value=++rowindex;
   // alert(document.getElementById("rowindex").value);
}
function deleteRow() {
   var varCbxs = document.getElementsByName("cbxTaisyomei");
   var tmp = 0;
   
   var len = varCbxs.length;
   //alert(varCbxs.length);
   
   for(var j = len-1;j>=0;j--){
  
       if(varCbxs[j].checked){
           
           document.getElementById("myTable").deleteRow(j+1);
       }
   }
   document.getElementById("rowindex").value=document.getElementsByName("cbxTaisyomei").length+1;}button的click事件  改成onclick="insertRow()"
参照这个改改吧

Answer 8

用逗号分割的形式或者json格式返回给服务端