C# ASP 动态添加Html Table行
用JS放法实现以下效果：
前端文件Questionnaire23.aspx:
1 <%@ Page Title="题目" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Questionnaire23.aspx.cs" Inherits="Questionnaire_Questionnaire23" %> 2 3 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 4 </asp:Content> 5 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 6 <script type="text/javascript"> 7 function addRow(tbodyID) { 8 var bodyObj = document.getElementById(tbodyID); 9 if (bodyObj == null) { 10 alert("Body of Table not Exist!"); 11 return; 12 } 13 var rowCount = bodyObj.rows.length; 14 var cellCount = bodyObj.rows[0].cells.length; 15 var newRow = bodyObj.insertRow(rowCount++); 16 for (var i = 0; i < cellCount; i++) { 17 var cellHTML = bodyObj.rows[0].cells[i].innerHTML; 18 if (cellHTML.indexOf("none") >= 0) { 19 cellHTML = cellHTML.replace("none", ""); 20 } 21 newRow.insertCell(i).innerHTML = cellHTML; 22 } 23 } 24 function removeRow(inputobj) { 25 if (inputobj == null) return; 26 var parentTD = inputobj.parentNode; 27 var parentTR = parentTD.parentNode; 28 var parentTBODY = parentTR.parentNode; 29 parentTBODY.removeChild(parentTR); 30 } 31 </script> 32 <div> 33 23、针对衔接培养开发的特色校本课程（没有空白即可）<br/><br/> 34 <table border="1" cellspacing="0" cellpadding="0"> 35 <thead> 36 <tr> 37 <th style="width:265px;">课程名称</th> 38 <th style="width:150px;">主编</th> 39 <th style="width:100px;"> </th> 40 </tr> 41 </thead> 42 <tbody id="tbody1"> 43 <tr> 44 <td> 45 <input name="className" style="display:none" mce_style="display:none" type="text" size="40"/> 46 </td> 47 <td> 48 <input name="authorName" style="display:none" mce_style="display:none" type="text" size="20"/> 49 </td> 50 <td> 51 <input id="delete" style="display:none" mce_style="display:none" type="button" value="删除行" onclick="removeRow(this)"/> 52 </td> 53 </tr> 54 </tbody> 55 <tr> 56 <td colspan="3"> 57 <input type="button" value="添加新行" onclick="addRow('tbody1')"/> 58 </td> 59 </tr> 60 </table> 61 </div> 62 <div> 63 <asp:LinkButton ID="Previous" runat="server" OnClick="Previous_Click">上一题</asp:LinkButton> 64 <asp:LinkButton ID="Next" runat="server" OnClick="Next_Click">下一题</asp:LinkButton> 65 </div> 66 </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的第一行下插入以下代码：
1 <% string[] answers = (string[])Session["Answer23"]; 2 if (answers != null) 3 { 4 for (int i = 0; i < answers.Length; i++) 5 { 6 try 7 { 8 string[] answerRow = answers[i].Split(new char[] { ':' }); 9 if (answerRow.Length == 2) 10 { 11 Response.Write("<tr>"); 12 Response.Write(" <td>"); 13 Response.Write(" <input name='className' type='text' size='40' value='" + answerRow[0] + "'/>"); 14 Response.Write(" </td>"); 15 Response.Write(" <td>"); 16 Response.Write(" <input name='authorName' type='text' size='20' value='" + answerRow[1] + "'/>"); 17 Response.Write(" </td>"); 18 Response.Write(" <td>"); 19 Response.Write(" <input name='delete' type='button' value='删除行' onclick='removeRow(this)'/>"); 20 Response.Write(" </td>"); 21 Response.Write("</tr>"); 22 } 23 } 24 catch (Exception ex) 25 { 26 System.Console.Write(ex.Message); 27 } 28 } 29 } 30 %>
当然后台文件要提供数据：
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 if (!IsPostBack) 4 { 5 Answer answer = (Answer)Session["Answer"]; 6 if (!String.IsNullOrEmpty(answer.Answer23)) 7 { 8 string[] answers = answer.Answer23.Split(new char[] { ';' }); 9 Session["Answer23"] = answers; 10 } 11 } 12 }
如果要实现下拉列表的加载，如下图：
需要这么输出：
1 Response.Write("<tr>"); 2 Response.Write(" <td>"); 3 Response.Write(" <input name='projectName' type='text' size='40' value='" + answerRow[0] + "'/>"); 4 Response.Write(" </td>"); 5 Response.Write(" <td>"); 6 Response.Write(" <select name='ctl00$MainContent$DropDownList1' id='DropDownList1_" + i + "' style='width'>"); 7 Response.Write(" <option value='0'>--请选择--</option>"); 8 Response.Write(" <option value='1'>北京</option>"); 9 Response.Write(" <option value='2'>上海</option>"); 10 Response.Write(" <option value='3'>广州</option>"); 11 Response.Write(" </td>"); 12 Response.Write(" <td>"); 13 Response.Write(" <select name='ctl00$MainContent$DropDownList2' id='DropDownList2_" + i + "' style='width'>"); 14 Response.Write(" <option value='0'>--请选择--</option>"); 15 Response.Write(" <option value='1'>在建</option>"); 16 Response.Write(" <option value='2'>验收</option>"); 17 Response.Write(" </td>"); 18 Response.Write(" <td>"); 19 Response.Write(" <input name='delete' type='button' value='删除行' onclick='removeRow(this)'/>"); 20 Response.Write(" </td>"); 21 Response.Write("</tr>"); 22 23 Response.Write("<script type='text/javascript'>"); 24 Response.Write(" var lstSelect = document.getElementById('DropDownList1_" + i + "'); "); 25 Response.Write(" for(var i=0;i<lstSelect.options.length;i++){ "); 26 Response.Write(" if(lstSelect.options[i].value=='" + answerRow[1] + "'){ "); 27 Response.Write(" lstSelect.options[i].selected=true;"); 28 Response.Write(" break;"); 29 Response.Write(" }"); 30 Response.Write(" }"); 31 Response.Write(" var lstSelect2 = document.getElementById('DropDownList2_" + i + "'); "); 32 Response.Write(" for(var i=0;i<lstSelect2.options.length;i++){ "); 33 Response.Write(" if(lstSelect2.options[i].value=='" + answerRow[2] + "'){ "); 34 Response.Write(" lstSelect2.options[i].selected=true;"); 35 Response.Write(" break;"); 36 Response.Write(" }"); 37 Response.Write(" }"); 38 Response.Write("</script>");
当然用jQuery也可以实现。
