多条记录提交到数据库

Question

订单号：   
     <asp:TableRow Height="100">
         <asp:TableCell ColumnSpan="6"  VerticalAlign="Top" HorizontalAlign="center"  >
           <asp:Table runat="server" ID="cailiao" CssClass="td3"  HorizontalAlign="center">
               <asp:TableRow Height="24" CssClass="td1" HorizontalAlign="center">
                   <asp:TableCell CssClass ="td2" Width="140" Text="名称" />
                   <asp:TableCell CssClass ="td2" Width="140" Text="数量" />
                   <asp:TableCell CssClass ="td2" Width="140" Text="价格" />
    <asp:TableCell CssClass ="td2" Width="40" style="cursor:hand;"> <input id="btnAddRow" class="btn" onclick="pop_cl_show()" type="button" value="+" /></asp:TableCell>                             
               </asp:TableRow>
           </asp:Table> 
        </asp:TableCell>  
       </asp:TableRow>一个订单有多种商品，需要实现动态增加行来录入不同的商品、数量、价格，然后提交到数据库。
请给一个代码明细

Answer 1

增加行=>提交按钮=>ajax=>ashx=>提交到数据库

Answer 2

<style type="text/css">
#dv_menu{margin:0px;}
#dv_menu ul{list-style-type:none; margin:0px; padding:0px; border-bottom:1px #000000 solid; height:30px; clear:both; overflow:hidden;}
#dv_menu li{list-style-type:none; margin:0px; padding:0px; font-size:12px; font-weight:bold; float:left;margin-right:2px; width:120px; height:30px; text-align:center; cursor:pointer; border:1px #000000 solid; margin-bottom:-2px;}
#dv_menu .sel{ color:#FFFFFF; background-color:#5A5045; border:#000000 }
#dv_menu .nosel{background-color:#D7D7D7; height:28px; margin-top:3px; color:#000000; }

#dv_prj .ul,li{list-style-type:none; margin:0; padding:0;}

      #dv_op_list ul,li,dt{ list-style-type:none; margin:0; padding:0;}
  #dv_op_list li{padding-left:10px; width:130px; height:20px; line-height:200%;overflow:hidden; margin-bottom:5px;}
  #dv_op_list ul{float:left; height:auto; margin-top:10px;}
  body{position:relative;}
  
.menu{
overflow:hidden;
background-color:#B4A6FF;
font-size:12px;
padding:5px;
height:25px;
clear:both;
}
.menu ul{
width:100%;
}
.menu ul, .menu li {
margin:0;
padding:0;
list-style-type:none;
}
.menu li {
float:left;
width:auto;
margin-left:5px;
height:20px;
text-align:left;
padding-top:5px;
background-repeat:no-repeat;
background-position:center left;
padding-left:20px;
cursor:pointer;
}
   .priceList{
     border:1px #000000 solid;
   }
   .priceList ul{
    width:100%;
   }
  .priceList ul,.priceList li{
   list-style-type:none; margin:0; padding:0; height:25px;
  }
  .priceList ul{
   clear:both; height:auto; border-top:1px #000000 solid;
  }
  .priceList li{
   float:left; text-align:left; line-height:180%; font-size:12px; text-align:center; border-right:1px #000000 solid; overflow:hidden;
  }
  .listTitle{
    height:25px; clear:both; border-top:none; text-align:center;
  }
  .listTitle li{
   font-weight:bold; background-color:#F3F3F3;
  }
  .priceList input{
  width:100%; border:none; height:25px; line-height:160%;
  }
  .priceList div{
  clear:both; margin:0; padding:0; line-height:normal;
  }
  
  
  .seltitle,.selcompany{
   width:200px; position:absolute; background-color:#FFFFFF; z-index:99; display:none; border:1px #999 solid;
  }
  .seltitle ul,.seltitle li,.selcompany ul,.selcompany li{
   width:100%; line-height:160%; cursor:pointer; list-style-type:none; margin:0; padding:0;
  }
   .seltitle li,.selcompany li
   {
       padding:2px;
   }
  .selunit{
   width:90px; position:absolute; background-color:#FFFFFF; z-index:99; display:none;
  }
  .SelStatus
  {
      background-color:#000099; color:#fff;
  }
  #ddl_Title,#ddl_company,#LinkButton1
  {
      display:none;
  }
    </style>
<div class="menu">
            <ul>
              <li style="background-image:url(/sysImages/folder/bs.gif)"><A href="javascript:Addlist()" title="添加">添加</A> </li>
              <!--
  <li style="background-image:url(/sysImages/folder/del.gif)"><a href="javascript:DeleteImg()">删除</a></li>
  -->
            </ul>
          </div>
          <div class="priceList">
            <ul class="listTitle" style="border-top:none;">
              <li style="width:120px;">产品名称</li>
  <li style="width:160px;">企业</li>
              <li style="width:90px;">含量／规格</li>
              <li style="width:90px;">批发价</li>
              <li style="width:90px;">零售价</li>
              <li style="width:90px;">计量单位</li>
              <li style="width:90px;">操作</li>
              <div style="clear:both;"></div>
            </ul>
<!--
            <ul>
              <li style="width:200px;"><input name="txt_title" id="txt_title" type="text" size="30" maxlength="50" />
              </li>
              <li style="width:90px;">
                <input name="txt_Price_1" type="text" id="txt_Price_1" size="10" maxlength="10" />
              </li>
              <li style="width:90px;">
                <input name="txt_Price_2" type="text" id="txt_Price_2" size="10" maxlength="10" />
              </li>
              <li style="width:90px;">
                <input name="txt_Unit" type="text" id="txt_Unit" size="10" maxlength="10" />
              </li>
              <li style="width:200px;">
                <label>
                <input name="txt_infor" type="text" id="txt_infor" size="30" maxlength="200" />
                </label>
              </li>
              <li style="width:100px;"><a href="javascript:DeleteRow();"><img src="/sysImages/folder/del.gif" width="16" height="16" alt=""  border="0;"/>删除</a></li>
              <div style="clear:both;"></div>
            </ul>
-->
          </div>

Answer 3

<script>
    var _selTitleObj;
    var _selCompany;
    var _selIndex = -1;
    var _mx, _my;
    jQuery(document).mouseover(function (event) {
        _mx = event.clientX;
        _my = event.clientY;
    });
    function Addlist() {
        var _ul = "\r\n";
        _ul += "            <ul>\r\n";
        _ul += "              <li style=\"width:120px;\"><input name=\"txt_title\" id=\"txt_title\" type=\"text\" size=\"50\" maxlength=\"50\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:160px;\">\r\n";
        _ul += "                <input name=\"txt_company\" type=\"text\" id=\"txt_company\" maxlength=\"200\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:90px;\">\r\n";
        _ul += "                <input name=\"txt_format\" type=\"text\" id=\"txt_format\"  maxlength=\"50\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:90px;\">\r\n";
        _ul += "                <input name=\"txt_price_1\"  type=\"text\" id=\"txt_price_1\" maxlength=\"10\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:90px;\">\r\n";
        _ul += "                <input name=\"txt_price_2\" type=\"text\" id=\"txt_price_2\" maxlength=\"10\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:90px;\">\r\n";
        _ul += "                <input name=\"txt_unit\" type=\"text\" value=\"元/吨\" id=\"txt_unit\" maxlength=\"10\" />\r\n";
        _ul += "              </li>\r\n";
        _ul += "              <li style=\"width:90px;\"><a href=\"javascript:void();\"><img src=\"/sysImages/folder/del.gif\" width=\"16\" height=\"16\" alt=\"\"  border=\"0\"/>删除</a></li>\r\n";
        _ul += "              <div style=\"clear:both;\"></div>\r\n";
        _ul += "            </ul>\r\n";
        jQuery(".priceList").append(_ul);
        var item = jQuery(".priceList>ul>li>a").eq(jQuery(".priceList>ul>li>a").length - 1);
        jQuery(item).click(function () {
            jQuery(this).parent().parent().remove();
        });
        //产品名称
        jQuery(item).parent().parent().find("#txt_title").click(function () {
            var offset = jQuery(this).offset();
            var _left = offset.left;
            var _top = offset.top;
            _selTitleObj = this;
            jQuery(".seltitle").css("left", _left - 2);
            jQuery(".seltitle").css("top", _top + 24);
            jQuery(".seltitle ul").empty();
            jQuery("#ddl_Title option").each(function (j, sitem) {
if (j > 10) { return; }
                jQuery(".seltitle ul").append("<li onclick=\"selectTitle(this)\">" + jQuery(sitem).val() + "</li>");
                //if (jQuery(".seltitle li").length > 20) { return; }
            });
            _selIndex = -1;
            jQuery(".seltitle").show();        });
        jQuery(item).parent().parent().find("#txt_title").keydown(function (event) {
            switch (event.keyCode) {
                case 38:
                    _selIndex = _selIndex - 1;
                    if (_selIndex < 0) _selIndex = 0;
                    SetSelectTitle();
                    break;
                case 40:
                    _selIndex = _selIndex + 1;
                    if (_selIndex >= jQuery(".seltitle li").length) _selIndex = jQuery(".seltitle li").length - 1;
                    SetSelectTitle();
                    break;
                case 13:
                    SetSelectTitle();
                    jQuery(".seltitle").hide();
                    break;
                default:
                    jQuery(".seltitle ul").empty();
                    jQuery("#ddl_Title option[value*='" + jQuery(this).val() + "']").each(function (j, sitem) {
                        if (j > 10) { return; }
                        jQuery(".seltitle ul").append("<li onclick=\"selectTitle(this)\">" + jQuery(sitem).val() + "</li>");
                    });
                    break;
            }
        });
        jQuery(item).parent().parent().find("#txt_title").blur(function (event) {
            var offset = jQuery(".seltitle").offset();
            if (_mx < offset.left ||
            _mx > (offset.left + jQuery(".seltitle").width()) ||
            _my < offset.top ||
            _my > (offset.top + jQuery(".seltitle").height())
            ) {
                jQuery(".seltitle").hide();
            }
        });        //公司名称
        jQuery(item).parent().parent().find("#txt_company").click(function () {
            var offset = jQuery(this).offset();
            var _left = offset.left;
            var _top = offset.top;
            _selCompany = this;
            jQuery(".selcompany").css("left", _left - 2);
            jQuery(".selcompany").css("top", _top + 24);
            jQuery(".selcompany ul").empty();
            jQuery("#ddl_company option").each(function (j, sitem) {
if (j > 10) { return; }
                jQuery(".selcompany ul").append("<li onclick=\"selectCompany(this)\">" + jQuery(sitem).val() + "</li>");
                //if (jQuery(".selcompany li").length > 20) { return; }
            });
            _selIndex = -1;
            jQuery(".selcompany").show();        });
        jQuery(item).parent().parent().find("#txt_company").keydown(function (event) {
            switch (event.keyCode) {
                case 38:
                    _selIndex = _selIndex - 1;
                    if (_selIndex < 0) _selIndex = 0;
                    SetSelectCompany();
                    break;
                case 40:
                    _selIndex = _selIndex + 1;
                    if (_selIndex >= jQuery(".selcompany li").length) _selIndex = jQuery(".selcompany li").length - 1;
                    SetSelectCompany();
                    break;
                case 13:
                    SetSelectCompany();
                    jQuery(".selcompany").hide();
                    break;
                default:
                    jQuery(".selcompany ul").empty();
                    jQuery("#ddl_company option[value*='" + jQuery(this).val() + "']").each(function (j, sitem) {
                        if (j > 10) { return; }
                        jQuery(".selcompany ul").append("<li onclick=\"selectCompany(this)\">" + jQuery(sitem).val() + "</li>");
                    });
                    break;
            }
        });
        jQuery(item).parent().parent().find("#txt_company").blur(function (event) {
            var offset = jQuery(".selcompany").offset();
            if (_mx < offset.left ||
            _mx > (offset.left + jQuery(".selcompany").width()) ||
            _my < offset.top ||
            _my > (offset.top + jQuery(".selcompany").height())
            ) {
                jQuery(".selcompany").hide();
            }
        });    }
       function selectTitle(_li) {
        jQuery(_selTitleObj).val(jQuery(_li).text());
        jQuery(".seltitle").hide();
    }
    function SetSelectTitle() {
        jQuery(".seltitle li").removeClass("SelStatus");
        jQuery(".seltitle li").eq(_selIndex).addClass("SelStatus");
        jQuery(_selTitleObj).val(jQuery(".seltitle li").eq(_selIndex).text());
    }    function selectCompany(_li) {
        jQuery(_selCompany).val(jQuery(_li).text());
        jQuery(".selcompany").hide();
    }
    function SetSelectCompany() {
        jQuery(".selcompany li").removeClass("SelStatus");
        jQuery(".selcompany li").eq(_selIndex).addClass("SelStatus");
        jQuery(_selCompany).val(jQuery(".selcompany li").eq(_selIndex).text());
    }
    function chkForm() {
        var flang = true;
        if (jQuery(".priceList>ul>li>a").length <= 0) {
            alert("请添加报送的行情信息!");
            flang = false;
        }
        jQuery(".priceList>ul").each(function (i, item) {
            if (jQuery(item).find("#txt_title").val() == "") {
                alert("列表中存在空的产品名称!");
                jQuery(item).find("#txt_title").focus();
                flang = false;
                return false;
            }
        });
        __doPostBack('LinkButton1', '');
        return flang;
    }
    Addlist();
</script> 

Answer 4

参考：
http://www.cnblogs.com/insus/archive/2011/12/08/2281000.htmlhttp://www.cnblogs.com/insus/archive/2012/09/22/2698515.html