Question

考虑具有数千行的表#table，它位于可滚动容器#table-container中：

<div id='table-container'>
  <table id='table'>
    ...
  </table>
</div>

目标是允许用户在输入字段中键入行号，通过按enter键提交值并让#table-container滚动到适当的位置。表单#gotorow由以下标记构成：

<form id="gotorow">
    Go to Row
    <input type="number"></input>
    <input type="submit" style="display:none"></input>
</form>

下面的jquery代码＆＃34;工作＆＃34;这样，当提交表单#gotorow时，表单的值（行号）将在变量index中捕获，从而确定行的位置。

$(document).ready(function(){

  # submit the form when user presses the enter key
  $('#gotorow').each(function(){
      $(this).find('input').keypress(function(event){
          if(event.which == 10 || event.which == 13)
              this.form.submit();
      });
  });

    # on form submission capture row number and determine position
    $('#gotorow').submit( function(){
      var index = $(this).find('input').val();
      var row = $('#table').find('tr').eq(index);
      var pos = $(row).offset().top;
   });

});

以下代码＆＃34;工作＆＃34;这样，在(document).ready上，表格滚动到指定的行号。

$(document).ready(function(){

    var index = 250;
    var row = $('#table').find('tr').eq(index);
    var pos = $(row).offset().top;
    $('#table-container').scrollTop(pos);

});

但是，如果组合上述两个代码位，则没有滚动快乐。

$(document).ready(function(){

  $('#gotorow').each(function(){
    $(this).find('input').keypress(function(event){
        if(event.which == 10 || event.which == 13)
            this.form.submit();
    });
  });

  $('#gotorow').submit( function(){
    var index = $(this).find('input').val();
    var row = $('#table').find('tr').eq(index);
    var pos = $(row).offset().top;
    $('#table-container').scrollTop(pos);
  });

});

非常感谢任何关于为什么最终代码位不起作用的建议。

Answer 1

试试这个：

<form id="gotorow">
  Go to Row
  <input type="number" id="findrow"></input>
  <span id="findrowbutton">Find Row</span>
</form>

// Outside your .ready wrap
document.getElementById("findrowbutton").addEventListener("click", function(){
  var index = document.getElementById("findrow").value;
  var row = $('#table').find('tr').eq(index);
  var pos = $(row).offset().top;
  $('#table-container').scrollTop(pos);
});

// On key up
document.getElementById("findrow").addEventListener("keyup", function(){
  var index = document.getElementById("findrow").value;
  var row = $('#table').find('tr').eq(index);
  var pos = $(row).offset().top;
  $('#table-container').scrollTop(pos);
});

表单上的滚动表提交？

1 个答案: