动态添加、删除TABLE行

下面是是实现对TABLE表的动态添加、删除的功能。

<script language="javascript">
 //添加1行   
function addTableRow(rowIndex)   
{   
    var tbobj=document.getElementById(autoTableId);   
    var trobj,tdobj;   
    if(rowIndex==-1){   
        trobj=tbobj.insertRow(-1);   
    }else{   
        trobj=tbobj.insertRow(rowIndex+1);   
    }   
    trobj.className="N1";   
    for(var i=0;i<autoTableRowData.length;i++){   
        tdobj=trobj.insertCell(-1);   
        tdobj.className="DN";   
        tdobj.innerHTML=autoTableRowData[i];   
    }   
    //重新定义onclick事件   
   setAddFunction();   
}   
//删除1行   
function delTableRow(rowIndex){   
    var tbobj=document.getElementById(autoTableId);   
    if(rowIndex==-1){   
        if(tbobj.rows.length>1){   
            tbobj.deleteRow(tbobj.rows.length-1);   
        }   
    }else{   
        tbobj.deleteRow(rowIndex);   
    }   
}   
//定义添加和删除动态行的onclick方法   
function setAddFunction(){   
    var addNames = document.getElementsByName(addTableRowName);   
    for(var i=0;i<addNames.length;i++){   
        addNames[i].onclick=new Function("addTableRow(this.parentNode.parentNode.rowIndex);");   
    }   
    var delNames = document.getElementsByName(delTableRowName);   
    for(var i=0;i<delNames.length;i++){   
        delNames[i].onclick=new Function("delTableRow(this.parentNode.parentNode.rowIndex);");   
    }   
}  

//定义动态表的id   
var autoTableId="idMultiTable";  
var i=1; 
//定义动态表中每一行的数据   
var autoTableRowData=new Array(   
'<a href="#" name="number"></a>',   
'<input type="text" size="12" name="productid" id="productid" value="">',   
'<input type="text" size="35" name="productname" id="productname" value="">',   
'<a href="#" name="deleteRow">删除</a>'   
);   
//定义添加按钮的name属性   
var addTableRowName="insertRow";   
//定义删除按钮的name属性   
var delTableRowName="deleteRow"; 
    
    </script>

 

能够动态的添加行了，还不行。需要从数据库中显示数据，但这个我还没有实现。上面的table是一个HTML控件。不知道这样能否从数据库中取出数据，是否需要一个服务端TABLE控件来显示，我不太明白下面是我的后台的代码，是针对服务端控件写的：

  SqlCommand cmd = new SqlCommand();
            SqlConnection conn = new SqlConnection();
            SqlDataAdapter da = new SqlDataAdapter();
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            conn.ConnectionString = "server=(local);database=data_test;uid=sa;pwd=123";
            cmd.CommandText = "select * from product";
            cmd.Connection = conn;
            da.SelectCommand = cmd;
            da.Fill(ds);
            dt = ds.Tables[0];
            int numrows = dt.Rows.Count;
            int numcells = dt.Columns.Count;

               //添加一行显示表头
        string[] title ={ "序号", "产品号", "产品名" ,"删除"};

            TableRow tr = new TableRow();
            for (int i = 0; i < numcells; i++)
            {
                TableCell tc = new TableCell();
                tc.Text =title[i];
                tr.Cells .Add (tc);
            }
            this.idMultiTable.Rows.Add(tr);

            for (int j=0;j<numrows ;j++)
            {
               TableRow r=new TableRow ();
                for (int i=0;i<numcells ;i++)
                {
                    TableCell c = new TableCell();
                    c.Text = dt.Rows[j][i].ToString();
                    c.Controls.Add(new LiteralControl(dt.Rows[j][i].ToString()));
                    r.Cells.Add(c);
                }
                
            }
           this.idMultiTable.Rows.Add(tr);

 

不知道怎样改才能实现呢？