Clone table and filter out rows

Question

Hello I got a question regarding cloning a table.

I want to filter out some specific results and output those results. Let me explain myself better with HTML code:

<table class="table table-striped" id="ProfileList2">
    <tbody>
        <tr>
            <td>21</td>
            <td>2014-02-28 21:12:12</td>
            <td>20</td>
            <td>one</td>
            <td>166</td>
        </tr>
        <tr>
            <td>22</td>
            <td>2014-03-01 14:04:35</td>
            <td>20</td>
            <td>one</td>
            <td>0</td>
        </tr>
        <tr>
            <td>23</td>
            <td>2014-03-03 15:22:56</td>
            <td>20</td>
            <td>one</td>
            <td>21</td>
        </tr>
        <tr>
            <td>24</td>
            <td>2014-03-03 17:15:56</td>
            <td>20</td>
            <td>one</td>
            <td>21</td>
        </tr>
        <tr>
            <td>25</td>
            <td>2014-03-03 17:50:49</td>
            <td>20</td>
            <td>one</td>
            <td>0</td>
        </tr>
        <tr>
            <td>26</td>
            <td>2014-03-05 17:33:42</td>
            <td>20</td>
            <td>one</td>
            <td>24</td>
        </tr>
    </tbody>
</table>

<p class="result"></p>

In my Javascript I want to filter out all the results that have within the last <td> or every <tr> the value 0.

var $mainTable = $("#ProfileList2");
var $training = $mainTable.clone("tr td:nth-child(5):not(:contains('0'))");

$('p').append($training);

This code will clone a direct copy without doing any filtering. If I change the clone function to, for example: find function, it will only return the table-data: 166 21 21 24.

Is there any function available that will return the whole table-row instead of only the table-data?

JSFIDDLE OVER HERE

Answer 1

Well, you could copy the whole thing and then filter out what you don't like, how about that?

var copy = $("#ProfileList2").clone();

$('p').append(copy);

copy.find("tr td:nth-child(5):contains('0')").parent().remove();

Make note that it is not a good idea to have multiple elements with the same id.

Answer 2

To grab the table rows, change this:

$mainTable.find("tr td:nth-child(5):not(:contains('0'))")

… to this:

$mainTable.find("tr td:nth-child(5):not(:contains('0'))").parent()

Also note that a paragraph element cannot contain a table element according to the specification. (Although most browsers allow it.) Changing it to a div would be better.

Fiddle 1

---

Also note that the contains selector will search for a 0 within the cell, so it will match cells containing "160" as well as those containing "0."

Instead, you could filter to exclude only cells that equal "0":

 $mainTable .find("tr td:nth-child(5)") .filter(function() {return $(this).text() != '0';}) .parent(); 

Fiddle 2