Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums How to dynamically add a table row with textbox? – MindStick
Ask Question

How to dynamically add a table row with textbox?

Manish Kumar 2291 23 May 2017
I am beginner in jquery..please help me ...this is my html code 
<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>  
jquery asp.netjqueryjavascript
Manish Kumar
Ask by Manish Kumar
Updated 02 Jun 2017

2 Answers

Anonymous User
Anonymous User 02 Jun 2017
Report Abuse

Here's a quick solution:

$('#btnAdd').click(function(e) {
    $('#myTable tr:last').after(
        '<tr><td><input type="text" id="txtName' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtAge' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtGender' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtOccupation' + $("tr:last")[0].rowIndex + '" /></td></tr>'
    );ISO certification bangalor

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


Anonymous User
Anonymous User 24 May 2017 Accepted Answer
Report Abuse

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>  
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md