asp.net2.0中如何动态增加删除表格，在增加表格的同时能增加下拉列表控件？在线等

Question

昨晚天刚用JS写一个，给个参考吧
-----------<script type="text/javascript">
//印刷机组信息
var machineStr = '<%=machineStr %>';
//可开计划的产品编号和名称信息
var productionStr ='<%=productionStr %>';
//将印刷机台信息绑定到下接框
function BindSelect(context,flag)
{
    context.length=0; 
    var arrData;
    if(flag == 'machine')
    {
        arrData = machineStr.split(","); 
    }
    else if(flag == 'production')
    {
        arrData = productionStr.split(","); 
    }
    for (var i = 0; i < arrData.length; i++) 
    { 
        var data = arrData[i].split("@"); 
        context.options[context.length]=new Option(data[1],data[0]); 
    }   
}
//添加一个div，并在div放开计划的控件
function AddNewPlanDiv()
{
    var parentDiv=document.getElementById('parentDiv');
    var childDiv=document.createElement("div");
    var i=parentDiv.children.length;
    childDiv.id="div"+i;
    if(i==0)
    {
        childDiv.innerHTML="<table class='tableFrame1' width='100%'><tr><td>产品名称</td><td>机台</td><td>班组</td><td>版式</td><td>版数</td>"+
                       "<td>计划量</td><td>备注</td></tr>"+
                       "<tr><td><select name='selectProd' onfocus='BindSelect(this,\"production\")' style='width:200px;'><option></option></select></td>"+
                       "<td><select name='selectMachine' onfocus='BindSelect(this,\"machine\")' style='width:60px;'><option></option></select></td>"+
                       "<td><input name='teamOrGroup' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='format' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='versionNum' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='planQuantity' type='text' style='width:80px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='re' type='text' style='width:200px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input id='btnDel' type='button' value='删除' onclick='DeleteDiv("+i+")' /></td></tr></table>";
    }
    else
    {
        childDiv.innerHTML="<table class='tableFrame1' width='100%'>"+
                       "<tr><td><select name='selectProd' onfocus='BindSelect(this,\"production\")' style='width:200px;'><option></option></select></td>"+
                       "<td><select name='selectMachine' onfocus='BindSelect(this,\"machine\")' style='width:60px;'><option></option></select></td>"+
                       "<td><input name='teamOrGroup' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='format' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='versionNum' type='text' style='width:100px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='planQuantity' type='text' style='width:80px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input name='re' type='text' style='width:200px;' onblur=\"this.value=this.value.replace(/,/g,'，')\"/></td>"+
                       "<td><input id='btnDel' type='button' value='删除' onclick='DeleteDiv("+i+")' /></td></tr></table>";
    }
    parentDiv.appendChild(childDiv);
}
//删除div
function DeleteDiv(str)
{
    var parentDiv=document.getElementById('parentDiv');
    var temp=parentDiv.children[str];
    temp.removeNode(true);  
    for(var i = 0;i < parentDiv.children.length;i++)
    {
        parentDiv.childNodes[i].value = i;
        parentDiv.childNodes[i].childNodes[1].outerHTML="<input id='btnDel' type='button' value='删除' onclick='DeleteDiv("+i+")' />";
    }
}
</script>-------------
C#//定义两个变量，将所有相应信息加载到客户端
    public static string machineStr;//机台信息
    public static string productionStr;//产品信息
//读值
protected void btnSubmitPlan_Click(object sender, EventArgs e)
    {
        string strProdId = Request.Form["selectProd"];//产品编号
        string strMachineId = Request.Form["selectMachine"];//机组编号
        string strTeamOrGroup = Request.Form["teamOrGroup"];//班组
        string strFormat = Request.Form["format"];//版式 
        string strVersionNum = Request.Form["versionNum"];//版数
        string strPlanQuantity = Request.Form["planQuantity"];//计划量
        string strRe = Request.Form["re"];//备注
        if (strProdId.Length > 0)//有新计划
        {
            string[] prodId = strProdId.Split(',');//产品编号
            string[] machineId = strMachineId.Split(',');//机组编号
            string[] teamOrGroup = strTeamOrGroup.Split(',');//班组
            string[] format = strFormat.Split(',');//版式
            string[] versionNum = strVersionNum.Split(',');//版数
            string[] planQuantity = strPlanQuantity.Split(',');//计划量
            string[] re = strRe.Split(',');//备注
            if (strProdId.Length > 0)//用户添加了新计划
            {
                for (int i = 0; i < prodId.Length; i++)
                {
                    //向数据库插入新计划
                }
            }
        }
    }

Answer 1

客户端脚本：
function  add_Row(the_table) 
   { 
    rowIndex=the_table.rows.length;
  var  the_row,the_cell; 
  var  cur_rows=the_table.rows.length; 
  the_row=cur_rows==null?-1:(cur_rows); 
  var i=the_row-1; 
  var  newrow=the_table.insertRow(i+1);//得到插入位置
  rowIndex++;
  the_cell=newrow.insertCell(0); 
  the_cell.innerHTML=" <center >"+(i); 
  the_cell=newrow.insertCell(1); 
  the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='A"+rowIndex+"'  type=text  size=7>"; 
  the_cell=newrow.insertCell(2); 
  the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='B"+rowIndex+"'  type=text  size=7    >"; 
  the_cell=newrow.insertCell(3); 
  the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='C"+rowIndex+"'  type=text  size=7  >";
  the_cell=newrow.insertCell(4);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='D"+rowIndex+"'  type=text  size=7  >";
  the_cell=newrow.insertCell(5);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='E"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(6);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='F"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(7);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='G"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(8);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='H"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(9);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='I"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(7);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='J"+rowIndex+"'  type=text  size=7  >";
    the_cell=newrow.insertCell(11);
    the_cell.innerHTML=" <center  > <input class='input1' width='90%' id='K"+rowIndex+"'  type=text  size=7  >";
   the_cell=newrow.insertCell(12);
  the_cell.innerHTML="<center><a class='input1' style='cursor:hand' onclick='del_row(tblAlreadyBuildItem)'>删 除</a>"; 
    } 
    
      function  del_row(the_table){     var  the_cell; 
  the_cell=get_Element(event.srcElement,"td"); 
  var  index=the_cell.parentElement.rowIndex; 
  if(the_cell==null)  return; 
  if(the_table.rows.length==1)  return; 
  the_table.deleteRow(index); 
    for(var i=1;i<the_table.rows.length;i++)
    {
        the_table.rows[i].cells[0].innerText=i;
    }
  } 
 function ReadValue()
    {
    
      var table=document.getElementById('tblAlreadyBuildItem');
    var info = "";
    var objInfo = document.getElementById("hidAlreadyBuildItem");  // txtInfo是服务器控件
       for(num=1; num<=table.rows.length; num++)
    {
      var temp = "";
      var a = document.getElementById("A"+num);
      var b = document.getElementById("B"+num);
      var c = document.getElementById("C"+num);
       var d = document.getElementById("D"+num);
        var e = document.getElementById("E"+num);
           var f = document.getElementById("F"+num);
              var g = document.getElementById("G"+num);
                 var h = document.getElementById("H"+num);
                    var i = document.getElementById("I"+num);
                       var j = document.getElementById("J"+num);
              var k = document.getElementById("K"+num);     
      if(a!=null&&b!=null&&c!=null&&d!=null&&e!=null&&f!=null&&g!=null&&h!=null&&i!=null&&j!=null&&k!=null)
      {
    
        temp = temp + a.value +"^" + b.value +"^" +c.value+"^"+d.value +"^"+e.value +"^"+f.value +"^"+g.value +"^"+h.value +"^"+i.value +"^"+j.value +"^"+k.value  +"|";
      info = info + temp; 
      objInfo.value=info;
      }
    }
    }
HTML页面：
 <asp:HiddenField ID="hidAlreadyBuildItem" runat="server" />
<table border="1" cellpadding="0" runat="server" id="tblAlreadyBuildItem" cellspacing="0" style="width: 100%">
                        <tr  bgcolor="#f4fcff" >
                            <td class="bluebold" rowspan="2">
                                序号</td>
                            <td class="bluebold" colspan="1" rowspan="2">
                                项目名称</td>
                            <td class="bluebold" colspan="1" rowspan="2">
                                开工日期</td>
                            <td class="bluebold" colspan="4" style="height: 25px; ">
                                已批准的投资计划</td>
                            <td class="bluebold" colspan="4" style="height: 25px">
                                实际投资情况</td>
                            <td class="bluebold" colspan="1" rowspan="2">
                                项目建设状态</td>
                            <td class="bluebold" colspan="1" rowspan="2">
                                <asp:LinkButton ID="lbtnAddRowByCorporation" runat="server" ForeColor="Teal" OnClientClick="add_Row(tblAlreadyBuildItem);return false;"
                                    Width="41px">添加</asp:LinkButton></td>
                        </tr></table>
后台就是取hidAlreadyBuildItem的值进行分解，就不说了

Answer 2

到网上找个成熟的控件吧，太多了。
或者自己写也可以，依然是datagrid的那些事件来回弄