---
title: "How to dynamically add a table row with textbox?"  
description: "How to dynamically add a table row with textbox?"  
author: "Manish Kumar"  
published: 2017-05-23  
updated: 2017-06-02  
canonical: https://www.mindstick.com/forum/34300/how-to-dynamically-add-a-table-row-with-textbox  
category: "jquery"  
tags: ["asp.net", "jquery", "javascript"]  
reading_time: 2 minutes  

---

# How to dynamically add a table row with textbox?

I am [beginner](https://www.mindstick.com/forum/23159/need-beginner-project-ideas) in jquery..please help me ...this is my html code <[table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="table" id="maintable"> <thead> <tr> <th>[Firstname](https://www.mindstick.com/interview/33973/how-to-split-the-full-name-into-firstname-and-lastname-in-sql-server)</th> <th>Lastname</th> <th>[Email](https://www.mindstick.com/articles/12870/10-easy-ways-to-manage-your-business-email-inbox)</th> </tr> </thead> <tbody> <tr class="[data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)-contact-person"> <td> <[input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) type="text" name="f-name" class="form-[control](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control) f-name01" /></td> <td> <input type="text" name="l-name" class="form-control l-name01" /></td> <td> <input type="text" name="email" class="form-control email01" /></td> <td> <[button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) type="button" id="btnAdd" class="btn btn-xs btn-[primary](https://www.mindstick.com/forum/33739/difference-between-primary-key-and-unique-key) classAdd">Add More</button> </td> </tr> </tbody> </table>

## Replies

### Reply by Anonymous User

Here's a quick solution:

```

```

Also, I suggest you only have one Add button. You don't need to duplicate add buttons unless you need it.

\

### Reply by Anonymous User

You can try the following code:

```

```

```
@{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <script src="~/Scripts/jquery-3.1.1.js"></script>    <script src="~/Scripts/bootstrap.min.js"></script>    <link href="~/Content/bootstrap.min.css" rel="stylesheet" /></head><body>    <div>          <form id="form1" runat="server">          <div class="container">              <h2>Basic Table</h2>              <table class="table" id="maintable">                  <thead>                      <tr>                          <th>Firstname</th>                          <th>Lastname</th>                          <th>Email</th>                      </tr>                  </thead>                  <tbody>                      <tr class="data-contact-person">                          <td>                              <input type="text" name="f-name" class="form-control f-name01" /></td>                          <td>                              <input type="text" name="l-name" class="form-control l-name01" /></td>                          <td>                              <input type="text" name="email" class="form-control email01" /></td>                          <td>                              <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>                          </td>                      </tr>                  </tbody>              </table>              <button type="button" id="btnSubmit" class="btn btn-primary btn-md
pull-right btn-sm" onclick="return
btnSubmit_onclick()" onclick="return
btnSubmit_onclick()" onclick="return
btnSubmit_onclick()">Submit</button>          </div>    </div></body></html>//js
code  <script type="text/javascript">            $(document).ready(function () {                $(document).on("click", ".classAdd", function () { //                    var rowCount = $('.data-contact-person').length
+ 1;                    var contactdiv = '<tr class="data-contact-person">' +                '<td><input
type="text" name="f-name' +
rowCount + '" class="form-control
f-name01" /></td>' +                '<td><input
type="text" name="l-name' +
rowCount + '" class="form-control
l-name01" /></td>' +                '<td><input
type="text" name="email' +
rowCount + '" class="form-control
email01" /></td>' +                             '<td><button
type="button" id="btnDelete" class="deleteContact btn
btn btn-danger btn-xs">Remove</button></td>' +                '</tr>';                    $('#maintable').append(contactdiv);
// Adding these controls to Main table
class                  });            });            $(document).on("click", ".deleteContact", function () {                $(this).closest("tr").remove();
// closest used to remove the respective
'tr' in which I have my controls               });               </script>  
```


---

Original Source: https://www.mindstick.com/forum/34300/how-to-dynamically-add-a-table-row-with-textbox

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
