I have Created Dynamic Table In JavaScript and How to Save Data In Sql DB

Total Post:1

Points:7
C#
 608  View(s)
Ratings:
Rate this:
  <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>
        <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="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                '<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>  
               
                <script type="text/javascript">

Answer