Update index.html

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>POZO DE JACOB CRISTO VIVE DE ANTÓN</title>
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -66,6 +67,9 @@
         #footer {
             font-size: 12px;
             margin-top: 0px; 
+        }
+              #addCellIcon, #removeCellIcon, #addRowIcon, #removeRowIcon {
+            cursor: pointer;
         }
     </style>
     <link rel="icon" href="https://ia800509.us.archive.org/8/items/tcvl_20231025/TCVL%20%281%29.png" alt="Nuevo ícono"/>
@@ -247,11 +251,56 @@
                 <td contenteditable="true"></td>
             </tr>
          </table>
+      <div id="icons">
+            <i id="addCellIcon" class="fas fa-plus" title="Agregar celda"></i>
+            <i id="removeCellIcon" class="fas fa-minus" title="Quitar celda"></i>
+            <i id="addRowIcon" class="fas fa-plus" title="Agregar fila"></i>
+            <i id="removeRowIcon" class="fas fa-minus" title="Quitar fila"></i>
+        </div>
  <button id="addRow">Agregar Fila</button>
         <button id="printPDF">Imprimir PDF</button>
        <p style="font-size: 10px; opacity: 0.5;">Equipo Digital Cristo Vive Por JairNay ❤️ Puerco-Frito-V15-2023</p>
     </form>
     <script>
+       document.addEventListener('DOMContentLoaded', function () {
+            const donationTable = document.getElementById('donationTable');
+            const addCellIcon = document.getElementById('addCellIcon');
+            const removeCellIcon = document.getElementById('removeCellIcon');
+            const addRowIcon = document.getElementById('addRowIcon');
+            const removeRowIcon = document.getElementById('removeRowIcon');
+
+            addCellIcon.addEventListener('click', () => {
+                // Agregar celda
+                donationTable.rows[0].insertCell(-1).outerHTML = "<th contenteditable='true'></th>";
+                for (let i = 1; i < donationTable.rows.length; i++) {
+                    donationTable.rows[i].insertCell(-1).outerHTML = "<td contenteditable='true'></td>";
+                }
+            });
+
+            removeCellIcon.addEventListener('click', () => {
+                // Quitar celda
+                for (let i = 0; i < donationTable.rows.length; i++) {
+                    const cells = donationTable.rows[i].cells;
+                    if (cells.length > 1) {
+                        cells[cells.length - 1].remove();
+                    }
+                }
+            });
+
+            addRowIcon.addEventListener('click', () => {
+                // Agregar fila
+                const newRow = donationTable.insertRow(-1);
+                for (let i = 0; i < donationTable.rows[0].cells.length; i++) {
+                    newRow.insertCell(-1).outerHTML = "<td contenteditable='true'></td>";
+                }
+            });
+
+            removeRowIcon.addEventListener('click', () => {
+                // Quitar fila
+                if (donationTable.rows.length > 2) {
+                    donationTable.deleteRow(-1);
+                }
+            });
         document.addEventListener('DOMContentLoaded', function () {
             const addRowButton = document.getElementById('addRow');
             const printPDFButton = document.getElementById('printPDF');