Должен появиться вертикальный скролл при добавлении 20 строки в таблице, как это сделать?

Question

[evgeniyabutukhanova]

На html-странице есть форма и таблица.
Данные из формы добавляются в таблицу, возникает новая строка.
При добавлении 20 строки должен появиться вертикальный скролл в браузере.
Подскажите, пожалуйста, как это сделать?

<form>
      <input type="text" id="inputID"/>
      <select id = "selectID">
        <option>1</option>
        <option>2</option>
      </select>
    </form>
    <button id="addNewField">Add new field</button>
    <table id="container" border = "2" width = "550px">
      <tr>
        <td>Name</td>
        <td>Action</td>             
      </tr>
    </table>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(function() {
        $('#addNewField').click(function(){
          var inputVar = $('#inputID').val(),
              selectVar = $('#selectID').val(),
              tr = $('<tr></tr>'),
              td1 = $('<td></td>').append(inputVar),
              td2 = $('<td></td>').append(selectVar);
          tr.append(td1)
          tr.append(td2)            
          tr.appendTo('tbody', '#container')
          $('#inputID').val('');
        })
        var n = $("tr").size();
        if(n > 20) {
          $('body').css('overflow-y', 'scroll');
        }
      });
    </script>

Answer 1

[Александр Миранович]

jsfiddle.net/f48ZD/433
я там указал только 3 строки, что бы быстрее было видно, как работает скрипт, поменяйте на 20