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.
![Add TextBox Dynamically]()
.Aspx Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.TemplateTable
{
width: 80%;
margin-left: 3%;
border: 2px solid #a7a8a7;
margin-top: 30px;
padding-left: 35px;
font-size: 15px;
font-style: initial;
font-weight: bold;
color: #a7a8a7;
padding-top: 3px;
padding-bottom: 3px;
}
.TemplateTable tr td div
{
float: left;
padding-right: 10px;
font-size: 16px;
}
.TemplateTable tr td div a
{
color: Blue;
}
.custom-tablePopup
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 10px 0 0 0;
padding: 0;
border-right: 1px solid #bebebe;
border-top: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
}
.custom-tablePopup th
{
background: #ff5c00 !important;
text-align: left;
border-left: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
padding: 5px 8px;
color: #fff;
}
.custom-tablePopup td
{
border-left: 1px solid #bebebe;
padding: 4px 8px;
}
.custom-tablePopup tr:nth-child(even)
{
background: #f8f8f8;
}
</style>
<script type="text/javascript">
var count = "1";
function addRow(in_tbl_name) {
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 2
var td1 = document.createElement("TD")
var strHtml2 = "<input type=\"text\" name=\"SName\" size=\"30\" maxlength=\"30\" />";
td1.innerHTML = strHtml2.replace(/!count!/g, count);
// create table cell 3
var td2 = document.createElement("TD")
var strHtml3 = "<input type=\"text\" name=\"Email\" size=\"30\" maxlength=\"30\" />";
td2.innerHTML = strHtml3.replace(/!count!/g, count);
// create table cell 4
var td3 = document.createElement("TD")
var strHtml4 = "<input type=\"text\" name=\"Address\" size=\"30\" maxlength=\"30\" />";
td3.innerHTML = strHtml4.replace(/!count!/g, count);
// create table cell 5
var td4 = document.createElement("TD")
var strHtml5 = "<img src=\"Images/icon_03.png\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";
td4.innerHTML = strHtml5.replace(/!count!/g, count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
count = parseInt(count) + 1;
// add to count variable
// append row to table
tbody.appendChild(row);
}
function delRow() {
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName != "TR");
current.parentElement.removeChild(current);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" class="TemplateTable">
<tr>
<td>
Add New Template
</td>
<td style="float: right; padding-right: 90px;">
<div>
<img id="Img1" src="~/Images/icon_04.png" width="20" runat="server" /></div>
<div>
<a title="Add more template" style="cursor: pointer;" onclick="addRow('tblPets')">Add
Template</a>
</div>
</td>
</tr>
</table>
</div>
<div style="margin-left: 3%;">
<table id="tblPets" cellpadding="0" cellspacing="0" class="custom-tablePopup">
<tr>
<th>Student Name</th>
<th>Email</th>
<th>Address</th>
<th></th>
</tr>
<tr>
<td><input type="text" name="SName" size="30" maxlength="30" /></td>
<td><input type="text" name="Email" size="30" maxlength="30" /></td>
<td><input type="text" name="Address" size="30" maxlength="30" /></td>
<td><img src="Images/icon_03.png" onclick="delRow()" style="width: 22px; cursor: pointer;" /></td>
</tr>
</table>
</div>
<div>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</div>
<div>
<asp:Literal ID="lit" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>
.CS Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Data;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSave_Click(object sender, EventArgs e)
{
string[] SName = Request.Form.GetValues("SName");
string[] Email = Request.Form.GetValues("Email");
string[] Address = Request.Form.GetValues("Address");
DataTable dtable = dt();
for (int i = 0; i <= SName.Length - 1; i++)
{
DataRow row1 = dtable.NewRow();
row1["SName"] = SName[i];
row1["Email"] = Email[i];
row1["Address"] = Address[i];
dtable.Rows.Add(row1);
}
GetData(dtable);
}
static DataTable dt()
{
DataTable dt = new DataTable();
dt.Columns.Add("SName");
dt.Columns.Add("Email");
dt.Columns.Add("Address");
return dt;
}
protected void GetData(DataTable dt)
{
StringBuilder sb = new StringBuilder();
if (dt.Rows.Count > 0)
{
sb.AppendLine("<table cellpadding=\"0\" cellspacing=\"0\" class=\"custom-tablePopup\">");
sb.AppendLine("<tr><th>Student Name<th>");
sb.AppendLine("<th>Email</th>");
sb.AppendLine("<th>Address</th></tr>");
foreach (DataRow dr in dt.Rows)
{
sb.AppendLine("<tr>");
sb.AppendLine("<td>" + dr["SName"].ToString() + "</td>");
sb.AppendLine("<td>" + dr["Email"].ToString() + "</td>");
sb.AppendLine("<td>" + dr["Address"].ToString() + "</td>");
sb.AppendLine("</tr>");
}
sb.AppendLine("</table>");
lit.Text = sb.ToString();
}
}
}