<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Data Table</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background-color: darkblue;
color: white;
padding: 10px;
cursor: pointer;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
.delete-btn {
cursor: pointer;
color: red;
font-weight: bold;
}
.search-box {
background-color: #ddd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.search-box h2 {
background-color: darkblue;
color: white;
padding: 10px;
margin: 0;
border-radius: 5px;
}
.search-box input {
padding: 8px;
width: 100%;
max-width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 10px;
box-sizing: border-box;
}
.form-container {
background-color: lightblue;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.form-container .form-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form-container input {
width: 100%;
max-width: 45%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.form-container button {
width: 50%;
padding: 10px;
background-color: darkblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-sizing: border-box;
margin-top: 30px; /* Add 30px margin to the top */
}
.form-container .button-container {
display: flex;
justify-content: center;
}
h2 {
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container .form-group {
flex-direction: column;
}
.form-container input {
width: 100%;
}
.search-box input {
width: 100%;
max-width: none;
}
}
@media (max-width: 480px) {
.search-box {
flex-direction: column;
}
.search-box input {
width: 100%;
margin-left: 0;
}
table th, table td {
font-size: 12px;
padding: 5px;
}
}
</style>
<script>
let sortDirection = {
0: 'asc',
1: 'asc',
2: 'asc',
3: 'asc',
4: 'asc',
5: 'asc',
6: 'asc'
};
function addData(event) {
event.preventDefault();
const table = document.getElementById("dataTable");
const newRow = table.insertRow(-1);
const formData = document.getElementById("dataForm").elements;
for (let i = 0; i < formData.length - 1; i++) {
let cell = newRow.insertCell(i);
cell.textContent = formData[i].value;
}
let dateCell = newRow.insertCell(formData.length - 1);
dateCell.textContent = new Date().toLocaleString();
let deleteCell = newRow.insertCell(formData.length);
deleteCell.innerHTML = '<span class="delete-btn" onclick="confirmDelete(this)">🗑️</span>';
document.getElementById("dataForm").reset();
}
function searchTable() {
const input = document.getElementById('searchInput');
const filter = input.value.toLowerCase();
const table = document.getElementById("dataTable");
const tr = table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) {
let td = tr[i].getElementsByTagName("td");
let rowMatch = false;
for (let j = 0; j < td.length - 1; j++) {
if (td[j] && td[j].textContent.toLowerCase().indexOf(filter) > -1) {
rowMatch = true;
}
}
if (rowMatch) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
function confirmDelete(element) {
const confirmDelete = window.confirm('Está seguro? Se borrará la fila');
if (confirmDelete) {
const row = element.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}
function sortTable(columnIndex) {
const table = document.getElementById("dataTable");
const rows = Array.from(table.rows).slice(1);
const direction = sortDirection[columnIndex] === 'asc' ? 1 : -1;
rows.sort((rowA, rowB) => {
const cellA = rowA.cells[columnIndex].textContent.trim().toLowerCase();
const cellB = rowB.cells[columnIndex].textContent.trim().toLowerCase();
if (cellA < cellB) {
return -direction;
} else if (cellA > cellB) {
return direction;
}
return 0;
});
rows.forEach(row => table.appendChild(row));
sortDirection[columnIndex] = sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
}
</script>
</head>
<body>
<h2>INGRESAR NUEVO PRODUCTO</h2>
<div class="form-container">
<form id="dataForm" onsubmit="addData(event)">
<div class="form-group">
<input type="text" name="nombre_completo" placeholder="Nombre Completo" required>
<input type="text" name="cp" placeholder="CP" required>
</div>
<div class="form-group">
<input type="email" name="correo" placeholder="Correo" required>
<input type="text" name="ruta" placeholder="Ruta" required>
</div>
<div class="form-group">
<input type="text" name="info1" placeholder="Info 1" required>
<input type="text" name="info2" placeholder="Info 2" required>
</div>
<div class="button-container">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div class="search-box">
<h2 style="margin: 0;">TABLA DE PRODUCTOS</h2>
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search in table...">
</div>
<table id="dataTable" data-sort-order="asc">
<tr>
<th onclick="sortTable(0)">Nombre Completo</th>
<th onclick="sortTable(1)">CP</th>
<th onclick="sortTable(2)">Correo</th>
<th onclick="sortTable(3)">Ruta</th>
<th onclick="sortTable(4)">Info 1</th>
<th onclick="sortTable(5)">Info 2</th>
<th onclick="sortTable(6)">Date & Time</th>
<th>Otro</th>
</tr>
</table>
</body>
</html>