Javascript Ajax jQuery Html PHP Example Quiz New MORE

On click save on modal show data in table jQuery

❮ Previous Next ❯

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 »
❮ Previous Next ❯