javascript - 从填充的表格元素中获取前五行

我有一个由100行组成的表（称为mytbl-见下文）。从这个表中，我只想取前五行（假设用户按了“Show Top five”）
这是我试过的，但是警报给了我“空的”

var $updatedtable = $("#mytbl");
$updatedtable.empty();

for ( var i = 0; i < 5; i++ )
{
    $updatedtable.append(document.getElementById("mytbl").rows.item(i).innerHTML)
}

alert($updatedtable);
$updatedtable.appendTo( $( "#rbl" ) );

这是用于创建html页面的代码

<div class="tab-pane" id="rbl">
    <div id="rbldiv">
        <div class="bs-example voffset-10px">
            <form>
                <div class="form-group">
                    <label for="inputText" style="float:left;margin-right:5px;">Show top </label>
                    <div class="col-xs-1">
                        <input type="text" class="form-control input-normal" id="ben-count-set" placeholder="100">
                    </div>
                    <label for="inputText">  beneficiaries by cost increase</label>
                </div>
            </form>
        </div>

        <table id="mytbl" class="table table-striped table-hover"></table>
    </div>
</div>

另外，如果在我成功地进入前五名并且appendTorbl已经mytbl了，这不会被覆盖吗？如果以后用户想要查看前30名，那么这些值是否消失了？我该怎么办？
编辑：
感谢charlietfl和Tatermelon，我能够看到最上面一排的画面。但是我的行被切掉了，我还没有完全理解如何处理用户先选择前10，然后选择前11的情况。
这就是我试过的。
在我第一次创建（整个）表的函数中，我将表保存如下

function makeTable() {
//code to make table rbltbl
//code to make table rbltbl
//code to make table rbltbl
//code to make table rbltbl

//below line saves the table to $rows, so I can use it inside the click function below
$rows = $('#rbltbl tr').clone();
}

这是我的职责。假设“ben count set”是用户希望看到的值的数目。我认为应该将var$table改为从$rows读取，而不是从rbltbl读取。但是$rows在这里是空的。

$("#ben-count-submit").click(function (event) {
      event.preventDefault();
      console.log("clicked on the update button");

      var reqcount = document.getElementById('ben-count-set').value;
        var $table = $("#rbltbl");

    var $mystring = '#rbltbl tr:gt('+parseInt(reqcount)+')';
    $($mystring).remove();
    console.log($mystring);
        $table.appendTo( $( "#rbl" ) );
}

请告知。

最佳答案

如果您想要前5行的数组，可以使用几个不同的选择器在jQuery对象中获得它

$('#mytbl tr:lt(5)');

您可以将所有行缓存到一个变量中，以后仍然可以访问它们，而不管您对表做了什么…只需克隆它们

var $rows = $('#mytbl tr').clone();

要删除除前5项以外的所有项

$('#mytbl tr:gt(4)').remove();

然后换成另一行克隆克隆、筛选并插入

 $('#mytbl').html( $rows.clone().slice(5, 10) );

关于javascript - 从填充的表格元素中获取前五行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30157009/