Direktor klinike

Direktor: Prof. dr Jasna Jančić

<!DOCTYPE html>
<html lang="sr">
<head>
   
    <title>Tabela proizvoda</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Proizvodi</h2>

<table>
    <thead>
        <tr>
            <th>Proizvod</th>
            <th>Kategorija</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jaja</td>
            <td>
                <select id="jaja-kategorija" onchange="groupProducts()">
                    <option value="Hrana">Hrana</option>
                    <option value="Ostalo">Ostalo</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Brašno</td>
            <td>
                <select id="brasno-kategorija" onchange="groupProducts()">
                    <option value="Hrana">Hrana</option>
                    <option value="Ostalo">Ostalo</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Med</td>
            <td>
                <select id="med-kategorija" onchange="groupProducts()">
                    <option value="Hrana">Hrana</option>
                    <option value="Ostalo">Ostalo</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Meso</td>
            <td>
                <select id="meso-kategorija" onchange="groupProducts()">
                    <option value="Hrana">Hrana</option>
                    <option value="Ostalo">Ostalo</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Sokovi</td>
            <td>
                <select id="sokovi-kategorija" onchange="groupProducts()">
                    <option value="Pića">Pića</option>
                    <option value="Ostalo">Ostalo</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<h3>Grupisani proizvodi</h3>
<div id="grupisaniProizvodi"></div>

<script>
    function groupProducts() {
        const products = [
            { name: 'Jaja', category: document.getElementById('jaja-kategorija').value },
            { name: 'Brašno', category: document.getElementById('brasno-kategorija').value },
            { name: 'Med', category: document.getElementById('med-kategorija').value },
            { name: 'Meso', category: document.getElementById('meso-kategorija').value },
            { name: 'Sokovi', category: document.getElementById('sokovi-kategorija').value }
        ];

        let grouped = products.reduce((acc, product) => {
            if (!acc[product.category]) {
                acc[product.category] = [];
            }
            acc[product.category].push(product.name);
            return acc;
        }, {});

        let output = '';
        for (let category in grouped) {
            output += `<strong>${category}:</strong> ${grouped[category].join(', ')}<br>`;
        }

        document.getElementById('grupisaniProizvodi').innerHTML = output;
    }
</script>

</body>
</html>

Scroll to Top