How to dynamically add a table row with textbox?

Total Post:52

Points:366
 805  View(s)
Ratings:
Rate this:
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>  
  1. Post:9

    Points:37
    Re: How to dynamically add a table row with textbox?

    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>  

  1. Post:3

    Points:21
    Re: How to dynamically add a table row with textbox?

    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.


      Modified On Apr-11-2018 10:52:35 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!