CODEWITHSUNDEEP
javascriptjqueryhtml
saltandwater
saltandwater

Reputation: 841

Getting top five rows from a populated table element

I have a table (called mytbl - see below) consisting of 100 rows. From this table, I want to take only the first five rows (assume a user presses "Show Top Five")

This is what I have tried, however, the alert gives me 'empty'

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

This was the code used to create the html page

<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>

Also, if, after I successfully manage to get the top five and appendTo rbl which has mytbl, won't this get overwritten? If later the user wants to See Top 30, aren't the values gone? How can I take care of this?

EDIT: I was able to get the display of the top rows thanks to charlietfl and Tatermelon. But my rows get sliced off, and I haven't completely understood how to handle a case where user selects top 10 first and then top 11.

This is what I have tried. In the function where I'm making the (entire) table for the first time, I saved the table as follows

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

This is my function. Assume 'ben-count-set' is the number of values, the user wants to see. I think I should change var $table to read from $rows instead of rbltbl. But $rows gives empty here.

$("#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" ) );
}

Please advise.

Upvotes: 2

Views: 1327

Answers (2)

Tatermelon
Tatermelon

Reputation: 479

If you are using jquery, then you can use the :lt selector:

var $firstRows = $('#mytbl').find('tr:lt(5)');

Then, you can clone them to append in your new table so that they will not be removed from your original table:

$( "#rbl" ).append($firstRows.clone());

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

If you want an array of the first 5 rows can get it right in a jQuery object using several different selectors

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

You can can cache all the rows into a variable and still have access to them later regardless of what you do to the table...just clone them

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

Want to remove all but top 5 

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

then change out for another selection of rows clone the clone, filter them and insert

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

Upvotes: 1

Related Questions