Javascript Ajax jQuery Html PHP Example Quiz New MORE
Need a Website Or Web Application.Contact : +91 9437911966 (Whatsapp) Note: Paid Service

On click save on modal show data in table jQuery


You can also toggle between hiding and showing an element by using toggle() method.

Shown elements are hidden and hidden elements are shown:

The optional speed parameter can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after toggle() completes.

Syntax:

$(selector).toggle(speed,callback);

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="w3-col ">
<div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').style.display='none'"
        class="w3-button w3-display-topright">×</span>
        <h2>Modal Header</h2>
      </header>
        <div class="w3-container">
<form class="w3-container">
 <p>
 <label>First Name</label>
 <input class="w3-input" type="text" id="first_name"></p>
 <p>
 <label>Last Name</label>
 <input class="w3-input" type="text" id="last_name"></p>
 <p>
 <label>Email</label>
 <input class="w3-input" type="text" id="email"></p>
 <P><button type="button" class="w3-btn w3-blue" id="save">Save</button>
</form>
</div>
     
    </div>
  </div>
<br>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button  w3-blue">Open Modal</button>
<table class="w3-table-all" id="myTable">
<thead>
<tr class="w3-blue">
<th nowrap>Sl.No</th>      
<th nowrap>First Name</th>      
<th nowrap>Last name</th>
<th nowrap>Email</th>
<th nowrap>Action</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<script type="text/javascript">
$('#save').on('click', function() {
var first_name=$('#first_name').val();
var last_name=$('#last_name').val();
var email=$('#email').val();
var count = $('#myTable tr').length;
if(first_name!="" && last_name !="" && email!=""){
$('#myTable tbody').append('<tr class="child"><td>'+count+'</td><td>'+first_name+'</td><td>'+last_name+'</td><td>'+email+'</td><td><a href="javascript:void(0);" class="remCF1 btn btn-small btn-danger">Remove</a></td></tr>');
}
});
$(document).on('click','.remCF1',function(){
$(this).parent().parent().remove();
$('#myTable tbody tr').each(function(i){            
 $($(this).find('td')[0]).html(i+1);          
});
});
</script>
</body>
</html>
Run it Yourself »