C# ASP 动态添加Html Table行

用JS放法实现以下效果：

　　前端文件Questionnaire23.aspx:

 <%@ Page Title="题目" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Questionnaire23.aspx.cs" Inherits="Questionnaire_Questionnaire23" %>

 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
 </asp:Content>
 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 <script type="text/javascript">
     function addRow(tbodyID) {
         var bodyObj = document.getElementById(tbodyID);
         if (bodyObj == null) {
             alert("Body of Table not Exist!");
             return;
         }
         var rowCount = bodyObj.rows.length;
         var cellCount = bodyObj.rows[0].cells.length;
         var newRow = bodyObj.insertRow(rowCount++);
         for (var i = 0; i < cellCount; i++) {
             var cellHTML = bodyObj.rows[0].cells[i].innerHTML;
             if (cellHTML.indexOf("none") >= 0) {
                 cellHTML = cellHTML.replace("none", "");
             }
             newRow.insertCell(i).innerHTML = cellHTML;
         }
     }
     function removeRow(inputobj) {
         if (inputobj == null) return;
         var parentTD = inputobj.parentNode;
         var parentTR = parentTD.parentNode;
         var parentTBODY = parentTR.parentNode;
         parentTBODY.removeChild(parentTR);
     }
 </script>
     <div>
         23、针对衔接培养开发的特色校本课程（没有空白即可）<br/><br/>
         <table border="1" cellspacing="0" cellpadding="0">
             <thead>
                 <tr>
                     <th style="width:265px;">课程名称</th>
                     <th style="width:150px;">主编</th>
                     <th style="width:100px;">&nbsp;</th>
                 </tr>
             </thead>
             <tbody id="tbody1">
             <tr>
                 <td>
                     <input name="className" style="display:none" mce_style="display:none" type="text" size="40"/>
                 </td>
                 <td>
                     <input name="authorName" style="display:none" mce_style="display:none" type="text" size="20"/>
                 </td>
                 <td>
                     <input id="delete" style="display:none" mce_style="display:none" type="button" value="删除行" onclick="removeRow(this)"/>
                 </td>
             </tr>
             </tbody>
             <tr>
                 <td colspan="3">
                     <input type="button" value="添加新行" onclick="addRow('tbody1')"/>
                 </td>
             </tr>
         </table>
     </div>
     <div>
         <asp:LinkButton ID="Previous" runat="server" OnClick="Previous_Click">上一题</asp:LinkButton>
         <asp:LinkButton ID="Next" runat="server" OnClick="Next_Click">下一题</asp:LinkButton>
     </div>
 </asp:Content>

　　后台文件Questionnaire23.aspx.cs:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7
 8 public partial class Questionnaire_Questionnaire23 : System.Web.UI.Page
 9 {
10     protected void Page_Load(object sender, EventArgs e)
11     {
12         if (!IsPostBack)
13         {
14             Answer answer = (Answer)Session["Answer"];
15             //TODO
16         }
17     }
18
19     protected void Previous_Click(object sender, EventArgs e)
20     {
21         String className = (String)Request.Form.Get("className");
22         String authorName = (String)Request.Form.Get("authorName");
23         saveAnswer(className, authorName);
24
25         Response.Redirect("Questionnaire22.aspx");
26     }
27
28     protected void Next_Click(object sender, EventArgs e)
29     {
30         String className = (String)Request.Form.Get("className");
31         String authorName = (String)Request.Form.Get("authorName");
32         saveAnswer(className, authorName);
33
34         Response.Redirect("Questionnaire24.aspx");
35     }
36
37     private void saveAnswer(String className, String authorName)
38     {
39          Answer answer = (Answer)Session["Answer"];
40          answer.Answer23 = "";
41
42          string[] classes = className.Split(new char[] { ',' });
43          string[] authors = authorName.Split(new char[] { ',' });
44          for (int i = 0; i < classes.Length;i++ )
45          {
46              if (i != 0)
47              {
48                  answer.Answer23 = answer.Answer23 + classes[i] + ":" + authors[i] + ";";
49              }
50              else
51              {
52                  continue;
53              }
54          }
55          Session["Answer"] = answer;
56     }
57 } 

添加的行所接收的值以“，” 分割。所以取值的时候用“，”放到数组里。因为第0行是默认行。所以不取数组i = 0的值。

直接continue就好。也有一种方法是做一个table的demo。每次都复制demo的行，这样就省去了默认行的问题。

如果需要再次打开页面的时候把 动态添加的table行以及内容表示出来，就在table的第一行下插入以下代码：

            <% string[] answers = (string[])Session["Answer23"];
                 if (answers != null)
                 {
                     for (int i = 0; i < answers.Length; i++)
                     {
                         try
                         {
                             string[] answerRow = answers[i].Split(new char[] { ':' });
                             if (answerRow.Length == 2)
                             {
                                 Response.Write("<tr>");
                                 Response.Write(" <td>");
                                 Response.Write("     <input name='className' type='text' size='40' value='" + answerRow[0] + "'/>");
                                 Response.Write(" </td>");
                                 Response.Write(" <td>");
                                 Response.Write("     <input name='authorName' type='text' size='20' value='" + answerRow[1] + "'/>");
                                 Response.Write(" </td>");
                                 Response.Write(" <td>");
                                 Response.Write("     <input name='delete' type='button' value='删除行' onclick='removeRow(this)'/>");
                                 Response.Write(" </td>");
                                 Response.Write("</tr>");
                             }
                         }
                         catch (Exception ex)
                         {
                             System.Console.Write(ex.Message);
                         }
                     }
                 }
             %>

当然后台文件要提供数据：

     protected void Page_Load(object sender, EventArgs e)
     {
         if (!IsPostBack)
         {
             Answer answer = (Answer)Session["Answer"];
             if (!String.IsNullOrEmpty(answer.Answer23))
             {
                 string[] answers = answer.Answer23.Split(new char[] { ';' });
                 Session["Answer23"] = answers;
             }
         }
     }

如果要实现下拉列表的加载，如下图：

需要这么输出：

     Response.Write("<tr>");
     Response.Write(" <td>");
     Response.Write("     <input name='projectName' type='text' size='40' value='" + answerRow[0] + "'/>");
     Response.Write(" </td>");
     Response.Write(" <td>");
     Response.Write("     <select name='ctl00$MainContent$DropDownList1' id='DropDownList1_" + i + "'  style='width'>");
     Response.Write("        <option value='0'>--请选择--</option>");
     Response.Write("        <option value='1'>北京</option>");
     Response.Write("        <option value='2'>上海</option>");
     Response.Write("        <option value='3'>广州</option>");
     Response.Write(" </td>");
     Response.Write(" <td>");
     Response.Write("     <select name='ctl00$MainContent$DropDownList2' id='DropDownList2_" + i + "'  style='width'>");
     Response.Write("        <option value='0'>--请选择--</option>");
     Response.Write("        <option value='1'>在建</option>");
     Response.Write("        <option value='2'>验收</option>");
     Response.Write(" </td>");
     Response.Write(" <td>");
     Response.Write("     <input name='delete' type='button' value='删除行' onclick='removeRow(this)'/>");
     Response.Write(" </td>");
     Response.Write("</tr>");

     Response.Write("<script type='text/javascript'>");
     Response.Write("    var lstSelect = document.getElementById('DropDownList1_" + i + "');  ");
     Response.Write("    for(var i=0;i<lstSelect.options.length;i++){  ");
     Response.Write("        if(lstSelect.options[i].value=='" + answerRow[1] + "'){  ");
     Response.Write("            lstSelect.options[i].selected=true;");
     Response.Write("                break;");
     Response.Write("        }");
     Response.Write("     }");
     Response.Write("    var lstSelect2 = document.getElementById('DropDownList2_" + i + "');  ");
     Response.Write("    for(var i=0;i<lstSelect2.options.length;i++){  ");
     Response.Write("        if(lstSelect2.options[i].value=='" + answerRow[2] + "'){  ");
     Response.Write("            lstSelect2.options[i].selected=true;");
     Response.Write("                break;");
     Response.Write("        }");
     Response.Write("     }");
     Response.Write("</script>");

当然用jQuery也可以实现。