Here, you will see how to create a TextBox upon each button click using JavaScript and CSS.

I hope this code is very helpful for creating a paper format for an online examination project. Check it out. If you have any concerns then let me know.

online examination project
Add TextBox Dynamically
.Aspx Code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head id="Head1" runat="server">
  5. <title></title>
  6. <style type="text/css">
  7. .TemplateTable
  8. {
  9. width: 80%;
  10. margin-left: 3%;
  11. border: 2px solid #a7a8a7;
  12. margin-top: 30px;
  13. padding-left: 35px;
  14. font-size: 15px;
  15. font-style: initial;
  16. font-weight: bold;
  17. color: #a7a8a7;
  18. padding-top: 3px;
  19. padding-bottom: 3px;
  20. }
  21. .TemplateTable tr td div
  22. {
  23. float: left;
  24. padding-right: 10px;
  25. font-size: 16px;
  26. }
  27. .TemplateTable tr td div a
  28. {
  29. color: Blue;
  30. }
  31. .custom-tablePopup
  32. {
  33. font-family: Arial, Helvetica, sans-serif;
  34. font-size: 13px;
  35. margin: 10px 0 0 0;
  36. padding: 0;
  37. border-right: 1px solid #bebebe;
  38. border-top: 1px solid #bebebe;
  39. border-bottom: 1px solid #bebebe;
  40. }
  41. .custom-tablePopup th
  42. {
  43. background: #ff5c00 !important;
  44. text-align: left;
  45. border-left: 1px solid #bebebe;
  46. border-bottom: 1px solid #bebebe;
  47. padding: 5px 8px;
  48. color: #fff;
  49. }
  50. .custom-tablePopup td
  51. {
  52. border-left: 1px solid #bebebe;
  53. padding: 4px 8px;
  54. }
  55. .custom-tablePopup tr:nth-child(even)
  56. {
  57. background: #f8f8f8;
  58. }
  59. </style>
  60. <script type="text/javascript">
  61. var count = "1";
  62. function addRow(in_tbl_name) {
  63. var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
  64. // create row
  65. var row = document.createElement("TR");
  66. // create table cell 2
  67. var td1 = document.createElement("TD")
  68. var strHtml2 = "<input type=\"text\" name=\"SName\" size=\"30\" maxlength=\"30\" />";
  69. td1.innerHTML = strHtml2.replace(/!count!/g, count);
  70. // create table cell 3
  71. var td2 = document.createElement("TD")
  72. var strHtml3 = "<input type=\"text\" name=\"Email\" size=\"30\" maxlength=\"30\" />";
  73. td2.innerHTML = strHtml3.replace(/!count!/g, count);
  74. // create table cell 4
  75. var td3 = document.createElement("TD")
  76. var strHtml4 = "<input type=\"text\" name=\"Address\" size=\"30\" maxlength=\"30\" />";
  77. td3.innerHTML = strHtml4.replace(/!count!/g, count);
  78. // create table cell 5
  79. var td4 = document.createElement("TD")
  80. var strHtml5 = "<img src=\"Images/icon_03.png\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";
  81. td4.innerHTML = strHtml5.replace(/!count!/g, count);
  82. // append data to row
  83. row.appendChild(td1);
  84. row.appendChild(td2);
  85. row.appendChild(td3);
  86. row.appendChild(td4);
  87. count = parseInt(count) + 1;
  88. // add to count variable
  89. // append row to table
  90. tbody.appendChild(row);
  91. }
  92. function delRow() {
  93. var current = window.event.srcElement;
  94. //here we will delete the line
  95. while ((current = current.parentElement) && current.tagName != "TR");
  96. current.parentElement.removeChild(current);
  97. }
  98. </script>
  99. </head>
  100. <body>
  101. <form id="form1" runat="server">
  102. <div>
  103. <table cellpadding="0" cellspacing="0" class="TemplateTable">
  104. <tr>
  105. <td>
  106. Add New Template
  107. </td>
  108. <td style="float: right; padding-right: 90px;">
  109. <div>
  110. <img id="Img1" src="~/Images/icon_04.png" width="20" runat="server" /></div>
  111. <div>
  112. <a title="Add more template" style="cursor: pointer;" onclick="addRow('tblPets')">Add
  113. Template</a>
  114. </div>
  115. </td>
  116. </tr>
  117. </table>
  118. </div>
  119. <div style="margin-left: 3%;">
  120. <table id="tblPets" cellpadding="0" cellspacing="0" class="custom-tablePopup">
  121. <tr>
  122. <th>Student Name</th>
  123. <th>Email</th>
  124. <th>Address</th>
  125. <th></th>
  126. </tr>
  127. <tr>
  128. <td><input type="text" name="SName" size="30" maxlength="30" /></td>
  129. <td><input type="text" name="Email" size="30" maxlength="30" /></td>
  130. <td><input type="text" name="Address" size="30" maxlength="30" /></td>
  131. <td><img src="Images/icon_03.png" onclick="delRow()" style="width: 22px; cursor: pointer;" /></td>
  132. </tr>
  133. </table>
  134. </div>
  135. <div>
  136. <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
  137. </div>
  138. <div>
  139. <asp:Literal ID="lit" runat="server"></asp:Literal>
  140. </div>
  141. </form>
  142. </body>
  143. </html>

.CS Code

  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. using System.Web.Script.Serialization;
  8. using System.Data;
  9. using System.Text;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. }
  15. protected void btnSave_Click(object sender, EventArgs e)
  16. {
  17. string[] SName = Request.Form.GetValues("SName");
  18. string[] Email = Request.Form.GetValues("Email");
  19. string[] Address = Request.Form.GetValues("Address");
  20. DataTable dtable = dt();
  21. for (int i = 0; i <= SName.Length - 1; i++)
  22. {
  23. DataRow row1 = dtable.NewRow();
  24. row1["SName"] = SName[i];
  25. row1["Email"] = Email[i];
  26. row1["Address"] = Address[i];
  27. dtable.Rows.Add(row1);
  28. }
  29. GetData(dtable);
  30. }
  31. static DataTable dt()
  32. {
  33. DataTable dt = new DataTable();
  34. dt.Columns.Add("SName");
  35. dt.Columns.Add("Email");
  36. dt.Columns.Add("Address");
  37. return dt;
  38. }
  39. protected void GetData(DataTable dt)
  40. {
  41. StringBuilder sb = new StringBuilder();
  42. if (dt.Rows.Count > 0)
  43. {
  44. sb.AppendLine("<table cellpadding=\"0\" cellspacing=\"0\" class=\"custom-tablePopup\">");
  45. sb.AppendLine("<tr><th>Student Name<th>");
  46. sb.AppendLine("<th>Email</th>");
  47. sb.AppendLine("<th>Address</th></tr>");
  48. foreach (DataRow dr in dt.Rows)
  49. {
  50. sb.AppendLine("<tr>");
  51. sb.AppendLine("<td>" + dr["SName"].ToString() + "</td>");
  52. sb.AppendLine("<td>" + dr["Email"].ToString() + "</td>");
  53. sb.AppendLine("<td>" + dr["Address"].ToString() + "</td>");
  54. sb.AppendLine("</tr>");
  55. }
  56. sb.AppendLine("</table>");
  57. lit.Text = sb.ToString();
  58. }
  59. }
  60. }