Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>busz</title>
    <style type="text/css">
        body {
            font-family: Arial, sans;
        }
        td {
            cursor: pointer;
            background: lime;
            width: 30px;
            height: 30px;
            text-align: center;
        }
        .foglalt {
            background: red;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <table id="busz" border="1">
        <tr>
            <td style="visibility: hidden;"></td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>32</td>
        </tr>
        <tr>
            <td>33</td>
            <td>34</td>
            <td>35</td>
            <td>36</td>
        </tr>
        <tr>
            <td>37</td>
            <td>38</td>
            <td>39</td>
            <td>40</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
        <tr>
            <td>45</td>
            <td>46</td>
            <td>47</td>
            <td>48</td>
        </tr>
        <tr>
            <td>49</td>
            <td>50</td>
            <td>51</td>
            <td>52</td>
        </tr>
    </table>
    <br /><br />
    Ules szama: <input type="text" id="szam" /><br />
    Nev: <input type="text" id="nev" /><br />
    E-mail: <input type="text" id="email" /><br />
    <button id="lefoglalas" onclick="lefoglal()">Lefoglalas</button>

    <script type="text/javascript">
        var busz = document.getElementById('busz'),
            ulesek = [].slice.call(document.getElementsByTagName('td')),
            input_szam = document.getElementById('szam');

        ulesek.shift(); // kitoroljuk az elso ulest

        ulesek.forEach(function(ules) {
            ules.onclick = function() {
                input_szam.value = ules.innerHTML;
            }
        });
        function lefoglal() {
            ulesek[input_szam.value - 2].className = 'foglalt';
        }
    </script>
</body>
</html>