Menu Close

How to wrap tables with div element using jQuery?

How to wrap tables with div element using jQuery?

To wrap tables with div element, use the wrap() method. You can try to run the following code to wrap tables with div element using jQuery −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
     $("#button1").click(function(){
        $('table').wrap('<div></div>');
    });
   
});
</script>
<style>
 div {
  background-color: gray;
 }
</style>
</head>
<body>

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Will</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

<button id="button1">Wrap</button>

</body>
</html>
Posted in HTML, JQuery