Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>MINO</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h3><strong>ФОРМА ЗА ВНЕСУВАЊЕ ОЦЕНКИ</strong></h3>

        <table id="tabela1">

            <tr>
                <td>Ime:</td>
                <td><input type="text" id="ime"></td>
            </tr>
            <tr>
                <td>Prezime:</td>
                <td><input type="text" id="prezime"></td>
            </tr>
            <tr>
                <td>Indeks:</td>
                <td><input type="text" id="indeks"></td>
            </tr>
            <tr>
                <td>Predmet:</td>
                <td><input type="text" id="predmet"></td>
            </tr>
            <tr>
                <td>Ocenka:</td>
                <td>
                    <select id="opcija">
                        <option value="5 (pet)">5 (pet)</option>
                        <option value="6 (sest)">6 (sest)</option>
                        <option value="7 (sedum)">7 (sedum)</option>
                        <option value="8 (osum)">8 (osum)</option>
                        <option value="9 (devet)">9 (devet)</option>
                        <option value="10 (deset)">10 (deset)</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
            <button type="button" id="vnesi" onclick="klik()">Vnesi</button>
            </td>
            </tr>
    </table>

    <table id="tabela2" border="1">
        <tr>
            <td><strong>Ime</strong></td>
            <td><strong>Prezime</strong></td>
            <td><strong>Indeks</strong></td>
            <td><strong>Predmet</strong></td>
            <td><strong>Ocena</strong></td>
        </tr>
    </table>
</body>

<script type="text/javascript">

    document.getElementById("tabela2").style.visibility="hidden";
    var br=1;

    function klik(){
        var x,y,z,t,pom1,pom2;

        x = document.getElementById("ime").value;
        y = document.getElementById("prezime").value;
        z = document.getElementById("indeks").value;
        t = document.getElementById("predmet").value;

        pom1 = document.getElementById("opcija");
        pom2 = pom1.options[pom1.selectedIndex].value;
        tabela3 = document.getElementById("tabela2");
        tabela3.style.visibility="visible";

        var redica = tabela3.insertRow(br++);
        var kolona1 = redica.insertCell(0);
        var kolona2 = redica.insertCell(1);
        var kolona3 = redica.insertCell(2);
        var kolona4 = redica.insertCell(3);
        var kolona5 = redica.insertCell(4);

        kolona1.innerHTML = x;
        kolona2.innerHTML = y;
        kolona3.innerHTML = z;
        kolona4.innerHTML = t;
        kolona5.innerHTML = pom2;


        document.getElementById("ime").value = null;
        document.getElementById("prezime").value = null;
        document.getElementById("indeks").value = null;
        document.getElementById("predmet").value = null;
        document.getElementById("opcija").selectedIndex = "0";

    }

    </script>


</html>