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

想要删除除前五名之外的所有内容

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

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

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

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

1 个答案: