Question

html-page上有一个表单和一个表表单中的数据将添加到表中，并添加一个新行。添加第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

您应该将表格设置为div并让其滚动以使其正常工作。设置溢出-y：滚动到div，应该这样做。如果您希望滚动条仅在需要时显示，请使用自动。

<div style="overflow-y: scroll;">
  <table>

  </table>
</div>

Answer 2

试试这个.........

  $('#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 = $("#container tr").length;
  if(n == 20) {
    $("#container").css("height",20*parseInt($("#container tr")[0].css("height"))+"px").css("overflow-y","scroll");
  }
})

Answer 3

问题是你没有设置＆溢出-y＆＃39;在点击功能内。试试这个

<span ng-bind-html="varWithHtml | unsafe"></span>

}）;

Answer 4

您只需检查一次tr个元素的数量。您应该在每次向表格中添加一行后进行检查。

此外，自jQuery 1.8以来已弃用jQuery's size()方法，而是使用.length属性。

$(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('');

    // Execute this each time after adding
    // check the nr of td's using .length
    if ($("tr").length > 2) {
      $('body').css('overflow-y', 'scroll');
    }
  })
});

小提琴： https://jsfiddle.net/48mnmyq7/1/

如何在页面上进行垂直滚动？

4 个答案: