344 lines
12 KiB
HTML
344 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Excel-like Table</title>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f4f4f9;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
.table-container {
|
|
width: 48%;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
tr:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.actions button {
|
|
margin: 2px;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.edit-btn {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.delete-btn {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
.popup {
|
|
display: none;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
z-index: 1000;
|
|
}
|
|
.popup input {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.popup button {
|
|
margin-top: 10px;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.close-btn {
|
|
cursor: pointer;
|
|
float: right;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
.add-row-btn {
|
|
padding: 10px 20px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.add-row-btn:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Excel-like Table</h2>
|
|
|
|
<div class="container">
|
|
<!-- First Table -->
|
|
<div class="table-container">
|
|
<button class="add-row-btn" id="add-row-1">Add Row</button>
|
|
<table id="table-1">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Age</th>
|
|
<th>Email</th>
|
|
<th>Date Joined</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in entries_table1 %}
|
|
<tr data-id="{{ entry.id }}">
|
|
<td>{{ entry.id }}</td>
|
|
<td>{{ entry.name }}</td>
|
|
<td>{{ entry.age }}</td>
|
|
<td>{{ entry.email }}</td>
|
|
<td>{{ entry.date_joined }}</td>
|
|
<td class="actions">
|
|
<button class="edit-btn">Edit</button>
|
|
<button class="delete-btn">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Second Table -->
|
|
<div class="table-container">
|
|
<button class="add-row-btn" id="add-row-2">Add Row</button>
|
|
<table id="table-2">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Age</th>
|
|
<th>Email</th>
|
|
<th>Date Joined</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in entries_table2 %}
|
|
<tr data-id="{{ entry.id }}">
|
|
<td>{{ entry.id }}</td>
|
|
<td>{{ entry.name }}</td>
|
|
<td>{{ entry.age }}</td>
|
|
<td>{{ entry.email }}</td>
|
|
<td>{{ entry.date_joined }}</td>
|
|
<td class="actions">
|
|
<button class="edit-btn">Edit</button>
|
|
<button class="delete-btn">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Entry Popup -->
|
|
<div id="add-popup" class="popup">
|
|
<span class="close-btn">×</span>
|
|
<h3>Add Entry</h3>
|
|
<input type="text" id="add-name" placeholder="Name">
|
|
<input type="number" id="add-age" placeholder="Age">
|
|
<input type="email" id="add-email" placeholder="Email">
|
|
<button id="save-add">Add</button>
|
|
</div>
|
|
|
|
<!-- Edit Entry Popup -->
|
|
<div id="edit-popup" class="popup">
|
|
<span class="close-btn">×</span>
|
|
<h3>Edit Entry</h3>
|
|
<input type="hidden" id="edit-id">
|
|
<input type="text" id="edit-name" placeholder="Name">
|
|
<input type="number" id="edit-age" placeholder="Age">
|
|
<input type="email" id="edit-email" placeholder="Email">
|
|
<button id="save-edit">Save</button>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
let currentTableId = null; // To track which table is being edited
|
|
let currentModelName = null; // To track which model is being used
|
|
|
|
// Open Add Popup for Table 1
|
|
$('#add-row-1').on('click', function () {
|
|
currentTableId = 'table-1';
|
|
currentModelName = 'ExcelEntry'; // Model name for Table 1
|
|
$('#add-popup').fadeIn();
|
|
});
|
|
|
|
// Open Add Popup for Table 2
|
|
$('#add-row-2').on('click', function () {
|
|
currentTableId = 'table-2';
|
|
currentModelName = 'SecondTableEntry'; // Model name for Table 2
|
|
$('#add-popup').fadeIn();
|
|
});
|
|
|
|
// Close Popups
|
|
$('.close-btn').on('click', function () {
|
|
$('.popup').fadeOut();
|
|
});
|
|
|
|
// Save Add Entry
|
|
$('#save-add').on('click', function () {
|
|
let name = $('#add-name').val();
|
|
let age = $('#add-age').val();
|
|
let email = $('#add-email').val();
|
|
|
|
$.ajax({
|
|
url: `/add-entry/${currentModelName}/`,
|
|
method: 'POST',
|
|
data: {
|
|
'name': name,
|
|
'age': age,
|
|
'email': email,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function (response) {
|
|
let newRow = `
|
|
<tr data-id="${response.id}">
|
|
<td>${response.id}</td>
|
|
<td>${response.name}</td>
|
|
<td>${response.age}</td>
|
|
<td>${response.email}</td>
|
|
<td>${response.date_joined}</td>
|
|
<td class="actions">
|
|
<button class="edit-btn">Edit</button>
|
|
<button class="delete-btn">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
$(`#${currentTableId} tbody`).append(newRow);
|
|
$('#add-popup').fadeOut();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Open Edit Popup
|
|
$(document).on('click', '.edit-btn', function () {
|
|
let row = $(this).closest('tr');
|
|
currentTableId = row.closest('table').attr('id'); // Set current table ID
|
|
currentModelName = currentTableId === 'table-1' ? 'ExcelEntry' : 'SecondTableEntry'; // Set model name
|
|
$('#edit-id').val(row.data('id'));
|
|
$('#edit-name').val(row.find('td:eq(1)').text());
|
|
$('#edit-age').val(row.find('td:eq(2)').text());
|
|
$('#edit-email').val(row.find('td:eq(3)').text());
|
|
$('#edit-popup').fadeIn();
|
|
});
|
|
|
|
// Save Edit Entry
|
|
$('#save-edit').on('click', function () {
|
|
let id = $('#edit-id').val();
|
|
let name = $('#edit-name').val();
|
|
let age = $('#edit-age').val();
|
|
let email = $('#edit-email').val();
|
|
|
|
$.ajax({
|
|
url: `/update-entry/${currentModelName}/`,
|
|
method: 'POST',
|
|
data: {
|
|
'id': id,
|
|
'name': name,
|
|
'age': age,
|
|
'email': email,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function (response) {
|
|
if (response.status === 'success') {
|
|
let row = $(`tr[data-id="${id}"]`);
|
|
row.find('td:eq(1)').text(name);
|
|
row.find('td:eq(2)').text(age);
|
|
row.find('td:eq(3)').text(email);
|
|
$('#edit-popup').fadeOut();
|
|
} else {
|
|
alert('Failed to update entry: ' + response.message);
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('Failed to update entry. Please try again.');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Delete Entry
|
|
$(document).on('click', '.delete-btn', function () {
|
|
let row = $(this).closest('tr');
|
|
let id = row.data('id');
|
|
currentTableId = row.closest('table').attr('id'); // Set current table ID
|
|
currentModelName = currentTableId === 'table-1' ? 'ExcelEntry' : 'SecondTableEntry'; // Set model name
|
|
|
|
if (!confirm('Are you sure you want to delete this entry?')) return;
|
|
|
|
$.ajax({
|
|
url: `/delete-entry/${currentModelName}/`,
|
|
method: 'POST',
|
|
data: {
|
|
'id': id,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function (response) {
|
|
if (response.status === 'success') {
|
|
row.fadeOut(300, function () { $(this).remove(); });
|
|
} else {
|
|
alert('Failed to delete entry: ' + response.message);
|
|
}
|
|
},
|
|
error: function () {
|
|
alert('Failed to delete entry. Please try again.');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |