forum

Home / DeveloperSection / Forums / How to dynamically add a table row with textbox?

Ask Question

How to dynamically add a table row with textbox?

Manish Kumar173523-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>  
jqueryasp.net jquery javascript 
Updated on 02-Jun-2017
Manish Kumar

Manish Kumar

Follow

Can you answer this question?

Answer

2 Answers

Anonymous User

Anonymous User

02-Jun-2017

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

You can try the following code: 


@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
    <scriptsrc="~/Scripts/jquery-3.1.1.js"></script>
    <scriptsrc="~/Scripts/bootstrap.min.js"></script>
    <linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
</head>
<body>
    <div>
          <formid="form1"runat="server">  
        <divclass="container">  
            <h2>Basic Table</h2>  
            <tableclass="table"id="maintable">  
                <thead>  
                    <tr>  
                        <th>Firstname</th>  
                        <th>Lastname</th>  
                        <th>Email</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <trclass="data-contact-person">  
                        <td>  
                            <inputtype="text"name="f-name"class="form-control f-name01"/></td>  
                        <td>  
                            <inputtype="text"name="l-name"class="form-control l-name01"/></td>  
                        <td>  
                            <inputtype="text"name="email"class="form-control email01"/></td>  
                        <td>  
                            <buttontype="button"id="btnAdd"class="btn btn-xs btn-primary classAdd">Add More</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table>  
            <buttontype="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
  <scripttype="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>  

Liked By