Using Jquery should be able to add name email-id in the GRID

Question

Hello Team,

Hope you are doing good!!

Using Jquery should be able to add questions in the grid, Instead of ASP Server grid with Sorting of questions with MYSQL DB..

Can any one help me here, Thank you in advance!!

Amit Mohanty · Answer

Hey place the maintable between a div tag and set display property to none. "gridView" style= "display: none" > class = "table" id= "maintable" > Firstname Lastname Email "button" id= "btnSubmit" class = "btn btn-primary btn-md pull-right btn-sm" >Submit after that add the $(gridView).show(); in $(document).on("click", ".classAdd", function () "text/javascript" > $(document).ready( function () { $(document).on( "click" , ".classAdd" , function () { $(gridView).show(); // add this line //on is used for getting click event for dynamically created buttons var rowCount = $( '.data-contact-person' ).length + 1; var contactdiv = ' ' + ' + rowCount + '" class="f-name01">' + $( "#textBox1" ).val() + ' ' + ' + rowCount + '" class="l-name01">' + $( "#textBox2" ).val() + ' ' + ' + rowCount + '" class="email01">' + $( "#textBox3" ).val() + ' ' + ' Remove ' + ' ' ; $( '#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 }); }); If it hepls you then mark as an answer.

Amit Mohanty · Answer

Hey try this "C#" AutoEventWireup= "true" CodeFile= "Home.aspx.cs" Inherits= "Home" %> "http://www.w3.org/1999/xhtml" > "server" > Demo "utf-8" /> "viewport" content= "width=device-width, initial-scale=1" /> "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > "form1" runat= "server" > class = "container" > Basic Table "textBox1" runat= "server" > "textBox2" runat= "server" > "textBox3" runat= "server" > "button" id= "btnAdd" class = "btn btn-xs btn-primary classAdd" >Add More class = "table" id= "maintable" > Firstname Lastname Email "button" id= "btnSubmit" class = "btn btn-primary btn-md pull-right btn-sm" >Submit "text/javascript" > $(document).ready(function () { $(document).on( "click" , ".classAdd" , function () { //on is used for getting click event for dynamically created buttons var rowCount = $( '.data-contact-person' ).length + 1; var contactdiv = ' ' + ' + rowCount + '" class="f-name01">' + $( "#textBox1" ).val() + ' ' + ' + rowCount + '" class="l-name01">' + $( "#textBox2" ).val() + ' ' + ' + rowCount + '" class="email01">' + $( "#textBox3" ).val() + ' ' + ' Remove ' + ' ' ; $( '#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 }); });

Mas · Answer

Amit, How to clear the Text boxes after adding the values when we are adding to grid I am trying to use this function clrCtrl() { document.getElementById('ctl00_ContentPlaceHolder1_TextBox1').value = ""; document.getElementById('ctl00_ContentPlaceHolder1_TextBox2').value = ""; } but it is no working...

Mas · Answer

Hi Amit, Hope you are doing good today!! Thank you for your response, Initially the grid is not to be open.. When we are click event then only the grid should display..