<!DOCTYPE html>
<html>
<head>
<title>Dynamic Serial Number in HTML Table</title>
<style>
table {
margin: auto;
}
#pagination {
text-align: center;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Email</th>
</tr>
</table>
<script>
const data = [
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" },
{ name: "xyz", email: "xyz@geeksforgeeks.org" }
];
// Function to display the table with serial numbers
function displayTable() {
const table = document.getElementById("myTable");
// Clear existing table rows except the header
table.innerHTML = `
<tr>
<th>Serial Number</th>
<th>Name</th>
<th>Email</th>
</tr>
`;
// Add new rows to the table with serial numbers
data.forEach((item, index) => {
const row = table.insertRow();
const serialCell = row.insertCell(0);
const nameCell = row.insertCell(1);
const emailCell = row.insertCell(2);
serialCell.innerHTML = index + 1;
nameCell.innerHTML = item.name;
emailCell.innerHTML = item.email;
});
}
// Initial display of the table
displayTable();
</script>
</body>
</html>