Introduction:
Tables are a fundamental part of web development, allowing us to organize and present data in a structured manner. In this blog post, we will explore different methods to create dynamic tables using the power of jQuery. We'll cover everything from basic table creation to advanced techniques like sorting and filtering. By the end, you'll have a solid understanding of how to harness the flexibility of jQuery to build interactive tables for your web applications.
Method 1: Creating a Table with HTML Markup
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Creating a table dynamically
var table = $('<table>');
// Creating table rows and cells
for(var i=0; i<5; i++){
var row = $('<tr>');
for(var j=0; j<3; j++){
var cell = $('<td>').text('Row ' + i + ', Cell ' + j);
row.append(cell);
}
table.append(row);
}
// Appending the table to the HTML body
$('body').append(table);
});
</script>
</head>
<body>
<!-- Table will be created dynamically here -->
</body>
</html>
Output:
The above program will create a table with 5 rows and 3 columns. Each cell will display the row and column number, providing a basic structure for the table.
In this method, we use the HTML markup to define the table structure. We create a <table> element and dynamically append rows (<tr>) and cells (<td>) to it using jQuery. By manipulating the DOM, we construct the table structure and populate it with data. Finally, we append the table to the <body> element.
Method 2: Generating a Table from JSON Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// JSON data representing a list of employees
var jsonData = [
{"id": 1, "name": "John Doe", "position": "Developer"},
{"id": 2, "name": "Jane Smith", "position": "Designer"},
{"id": 3, "name": "Mike Johnson", "position": "Manager"}
];
// Creating a table dynamically from JSON data
var table = $('<table>');
// Creating table header row
var headerRow = $('<tr>');
headerRow.append($('<th>').text('ID'));
headerRow.append($('<th>').text('Name'));
headerRow.append($('<th>').text('Position'));
table.append(headerRow);
// Creating table rows from JSON data
$.each(jsonData, function(index, employee){
var row = $('<tr>');
row.append($('<td>').text(employee.id));
row.append($('<td>').text(employee.name));
row.append($('<td>').text(employee.position));
table.append(row);
});
// Appending the table to the HTML body
$('body').append(table);
});
</script>
</head>
<body>
<!-- Table will be created dynamically here -->
</body>
</html>
Output:
The above program will generate a table from the provided JSON data. It will display the employee ID, name, and position in separate columns.
In this method, we start with JSON data representing a list of employees. We create a table dynamically and add a header row with column names. Then, using the $.each function from jQuery, we iterate over the JSON data and create rows with the corresponding employee information. Finally, we append the table to the <body> element.
(Note: The output will be similar to the first method, but the data will be populated from the JSON.)
Method 3: Dynamically Adding Rows and Columns
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var table = $('<table>');
// Creating initial rows and columns
for(var i=0; i<3; i++){
var row = $('<tr>');
for(var j=0; j<3; j++){
var cell = $('<td>').text('Row ' + i + ', Cell ' + j);
row.append(cell);
}
table.append(row);
}
// Appending the table to the HTML body
$('body').append(table);
// Adding a new row dynamically
$('#add-row').click(function(){
var newRow = $('<tr>');
for(var j=0; j<3; j++){
var cell = $('<td>').text('New Row, Cell ' + j);
newRow.append(cell);
}
table.append(newRow);
});
// Adding a new column dynamically
$('#add-column').click(function(){
$('tr').each(function(){
var cell = $('<td>').text('New Column');
$(this).append(cell);
});
});
});
</script>
</head>
<body>
<!-- Table will be created dynamically here -->
<button id="add-row">Add Row</button>
<button id="add-column">Add Column</button>
</body>
</html>
Output:
The above program will create a table with an initial structure of 3 rows and 3 columns. Clicking the "Add Row" button will append a new row to the table dynamically. Similarly, clicking the "Add Column" button will add a new column to each existing row.
We can add new row by clicking "Add Row" button,
Also, added new column by clicking "Add Column" button.
In this method, we initially create a table with a fixed number of rows and columns. We add event listeners to the "Add Row" and "Add Column" buttons. When the "Add Row" button is clicked, a new row is dynamically created and appended to the existing table structure. When the "Add Column" button is clicked, a new cell (column) is added to each row in the table.
Method 4: Sorting and Filtering Table Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var table = $('<table>');
// Creating initial rows and columns
for(var i=0; i<3; i++){
var row = $('<tr>');
for(var j=0; j<3; j++){
var cell = $('<td>').text('Row ' + i + ', Cell ' + j);
row.append(cell);
}
table.append(row);
}
// Appending the table to the HTML body
$('body').append(table);
// Adding a new row dynamically
$('#add-row').click(function(){
var newRow = $('<tr>');
for(var j=0; j<3; j++){
var cell = $('<td>').text('New Row, Cell ' + j);
newRow.append(cell);
}
table.append(newRow);
});
// Adding a new column dynamically
$('#add-column').click(function(){
$('tr').each(function(){
var cell = $('<td>').text('New Column');
$(this).append(cell);
});
});
});
$(document).ready(function(){
// Sorting table data
$('#sort').click(function(){
var rows = $('table tr').get();
rows.sort(function(a, b) {
var aText = $(a).text().toUpperCase();
var bText = $(b).text().toUpperCase();
return (aText < bText) ? -1 : (aText > bText) ? 1 : 0;
});
$.each(rows, function(index, row){
$('table').append(row);
});
});
// Filtering table data
$('#filter').on('input', function(){
var value = $(this).val().toLowerCase();
$('table tr').filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>
</head>
<body>
<!-- Table will be created dynamically here -->
<button id="add-row">Add Row</button>
<button id="add-column">Add Column</button>
<!-- Table will be created dynamically here -->
<input type="text" id="filter" placeholder="Filter Table">
<button id="sort">Sort Table</button>
</body>
</html>
Output:
The above program will create a table with data. The "Filter Table" input allows you to filter the table rows based on the entered text. Clicking the "Sort Table" button will sort the table rows in ascending order based on the text content.
We can filter rows as like below,
In this method, we introduce table data and provide the functionality to sort and filter it dynamically. Clicking the "Sort Table" button triggers a sorting function that reorders the table rows based on the text content of each row. The "Filter Table" input uses the toggle() function to show or hide rows based on whether they match the entered filter text.
Conclusion:
In this blog post, we explored various methods to create dynamic tables using jQuery. We learned how to create tables using HTML markup, generate tables from JSON data, dynamically add rows and columns, and even sort and filter table data. By leveraging the power of jQuery, you can enhance the user experience and make your web applications more interactive and user-friendly.
Comments (0)