• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

C#ASP动态添加HtmlTable行

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

用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;">&nbsp;</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 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
VisualC#托管Socket的实现方法发布时间:2022-07-10
下一篇:
C#中.XSD是什么文件?发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap