Get html from nth tag and upwards

Question

I have a table...

        <table class="col-xs-12">
        <thead class="testhead col-xs-12">
            <tr class="col-xs-12" id="row1" style="color: white;">
                <th>0</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>           
        </thead>
        <tbody class="testbody col-xs-12">
            <tr class="testing col-xs-12" id="row0" style="color: white;">
                <td class="pTest">0 col 0</td>
                <td class="pTest">0 col 1</td>
                <td class="pTest">0 col 2</td>
                <td class="pTest">0 col 3</td>
                <td class="pTest">0 col 4</td>
            </tr>               

            <tr class="testing col-xs-12" id="row1" style="color: white;">
                <td class="pTest">1 col 0</td>
                <td class="pTest">1 col 1</td>
                <td class="pTest">1 col 2</td>
                <td class="pTest">1 col 3</td>
                <td class="pTest">1 col 4</td>
            </tr>

            <tr class="testing col-xs-12" id="row2" style="color: white;">
                <td class="pTest">2 col 0</td>
                <td class="pTest">2 col 1</td>
                <td class="pTest">2 col 2</td>
                <td class="pTest">2 col 3</td>
                <td class="pTest">2 col 4</td>
            </tr>               

            <tr class="testing col-xs-12" id="row3" style="color: white;">
                <td class="pTest">3 col 0</td>
                <td class="pTest">3 col 1</td>
                <td class="pTest">3 col 2</td>
                <td class="pTest">3 col 3</td>
                <td class="pTest">3 col 4</td>
            </tr>   

            <tr class="testing col-xs-12" id="row4" style="color: white;">
                <td class="pTest">4 col 0</td>
                <td class="pTest">4 col 1</td>
                <td class="pTest">4 col 2</td>
                <td class="pTest">4 col 3</td>
                <td class="pTest">4 col 4</td>
            </tr>                   
        </tbody>
    </table>

I want to split it in to two variables:

Var 1 to be the first x (custom amount) of TRs
Var 2 to be the rest of the TRs

I want it to include the <tr> tags too.

I have tried using jQuery nextAll and nextUntil and tr:gt(1) but they don't really work well.

For example this, even though I put gt greater than 1, it only gives me 1 TR and it also excludes the <tr> tags!

var hello = $(".testbody tr:gt(1)").html();
console.log(hello);

`html()` gets the content of the elements which is why the outer `` is omitted. For what reason do you need to actually get the HTML of the element? Normal practice is to work with the reference to the DOM element in the jQuery object itself, so this seems like an X/Y request. — Rory McCrossan, Feb 06 '18 at 11:59
For getting the outerHTML, see https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html — Chris Lear, Feb 06 '18 at 12:02
im trying to display table rows (echoed from php/ajax) on different divs — Danny Keeley, Feb 06 '18 at 12:02
thank you chris lear, I matched that with user3154108's answer to make the final sollution! — Danny Keeley, Feb 06 '18 at 12:06

score 1 · Accepted Answer · answered Feb 06 '18 at 11:55

1

jQuery's .html() only get the html of the first matched element. You will need to loop through your elements and combine the html yourself.

var hello = $('.testbody tr:gt(1)');
var html = '';
hello.each(function() {
    html = html + $(this).html()
});

for example.

Edit: .html() also will only get the inner html, not the tags/html of the elements themselves. You might need to figure out another approach

answered Feb 06 '18 at 11:55

user3154108

1,264
13
23

thank you, i matched it with chris lears comment about outer html and this is the solution: var hello = $('.testbody tr:gt(1)'); var html = ''; hello.each(function() { html = html + $(this)[0].outerHTML; }); console.log(html); – Danny Keeley Feb 06 '18 at 12:06

score 0 · Answer 2 · answered Feb 06 '18 at 12:01

0

try this,turn it to array,process it like array:

Array.from($(".testbody tr")).slice(0,3).reduce((a,v)=>a+=v.outerHTML,'');
Array.from($(".testbody tr")).slice(3,$(".testbody tr").length).reduce((a,v)=>a+=v.outerHTML,'');

answered Feb 06 '18 at 12:01

xianshenglu

4,943
3
17
34

Get html from nth tag and upwards

2 Answers2