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;"> </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>");