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

Question

我有一个包含 100 行的表(称为 mytbl - 见下文)。从此表中，我只想获取前五行(假设用户按下“显示前五行”)

这是我尝试过的方法，但是，警报给了我“空”

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>

另外，如果在我成功获得前五名后，appendTo rbl 其中有 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" ) );
}

请指教。

Answer 1

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

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

您可以将所有行缓存到一个变量中，并且无论您对表做了什么，以后仍然可以访问它们...只需克隆它们

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

想要删除除前 5 名以外的所有内容

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

然后更改为另一个选择的行克隆克隆，过滤它们并插入

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