Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to wrap tables with div element using jQuery?
To wrap tables with div element, use the wrap() method. The wrap() method wraps each selected element with the specified HTML structure. This is particularly useful for styling purposes or when you need to add container elements around existing tables for responsive design or visual enhancement.
Syntax
The basic syntax of the wrap() method is −
$(selector).wrap(wrappingElement)
Where wrappingElement is the HTML element that will wrap around each selected element.
Example
You can try to run the following code to wrap tables with div element using jQuery −
<!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 class="table-wrapper"></div>');
});
});
</script>
<style>
.table-wrapper {
background-color: lightgray;
padding: 10px;
border: 2px solid #333;
margin: 10px 0;
border-radius: 5px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: white;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
padding: 8px 15px;
margin: 10px 0;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Original Table</h3>
<table>
<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 Table with Div</button>
</body>
</html>
When you click the button, the table will be wrapped with a div container having a gray background, border, and padding, making it visually distinct.
How it Works
The wrap() method takes an HTML string as parameter and creates a wrapper element around each matched element. In this example −
-
$('table')selects all table elements on the page -
.wrap('<div class="table-wrapper"></div>')wraps each selected table with a new div element having the class "table-wrapper" - The CSS styling is applied to the wrapper class to make it visible with background color, border, and padding
- The wrapper div becomes the immediate parent of the table element
Multiple Tables Example
The wrap() method works on all matched elements. Here's an example with multiple tables −
// This will wrap all tables individually
$('table').wrap('<div class="table-container"></div>');
// This will wrap only tables with specific class
$('table.data-table').wrap('<div class="data-wrapper"></div>');
Conclusion
The jQuery wrap() method provides an easy and efficient way to wrap tables or any other elements with container divs. This technique is particularly useful for styling purposes, creating responsive layouts, and adding visual containers around existing content without modifying the original HTML structure.
925 Views
