How to get specific row's HTML into a jquery variable

Question

My goal is to get the entire HTML of each <tr> that has a class of "docClassesRow" and is after a <tr> that has an <a> element with a specific name value (docID in the jsFiddle table).

Once I get all of the matching rows' HTML into the variable, I need to insert those rows after another <tr> whose <a> element has a specific name value. For the purposes of this testing, I'd be fine with just inserting the HTML back into the table right after the docRow <tr>.

With the existing js, I'm not getting the HTML into the variable.

do you mean something like this? http://jsfiddle.net/bdVAR/3/ — I.G. Pascual, Jan 05 '12 at 01:40
you need to add `.parent()` right before `.find('tr.docClassesRow')` http://jsfiddle.net/FWJE2/7/ — I.G. Pascual, Jan 05 '12 at 01:50
SWEET! The update to my Fiddle did the trick! However... it doesn't seem to be inserting the HTML into the table correctly. — marky, Jan 05 '12 at 01:53
i see, that's because you're using `$('#docsTable a[name="' + docID + '"]')`, you should add `.parent().parent()` or `.parents("tr:first")`, like this http://jsfiddle.net/FWJE2/8/ — I.G. Pascual, Jan 05 '12 at 01:58
I need the `` tags included in the html being inserted. They need to be their own distinct rows, exactly as they were copied. Note in the Fiddle's html, each class has its own row. I need to copy each of those rows. I assumed `$docRow.parent().find('tr.docClassesRow')` would include the `` tag... — marky, Jan 05 '12 at 02:06

I.G. Pascual · Accepted Answer · 2012-01-05T02:08:20.743

3

Maybe something like this? I added the search of the link with specific id:

$(function(){
     $(".docClassesRow").each(function(){
         $("#specific").parents("tr:first").append($(this).html());
    });
});

http://jsfiddle.net/bdVAR/4/

UPDATE In your code, the solution would be this http://jsfiddle.net/FWJE2/9/

edited Jan 05 '12 at 02:08

answered Jan 05 '12 at 01:28

I.G. Pascual

5,818
5
42
58

I don't think that will work (or at least I'm not sure how to implement it). I am finding each of the `` tags with this: `$docRow.find('tr.docClassesRow').each(function() {` – marky Jan 05 '12 at 01:34
Okay, thanks for the sample code. I tried your method, but I don't think my selector for which rows to copy is incorrect - the table will have multiple `` elements that each hold a different doc, each with its own set of classes, so I need to specify which `` to look at for the code to copy and to append to. – marky Jan 05 '12 at 01:50
Okay - we're close, Nacho. It's not getting the `` tag, just the `` elements. I tried adding another .parent(), to "go up" another level, but that didn't do it. – marky Jan 05 '12 at 01:57
so you need the `tr` as well? what you need is `outerHTML` property – I.G. Pascual Jan 05 '12 at 02:00
yes I do - see how the inserted html makes a mess of the table... ;) – marky Jan 05 '12 at 02:01
@eventide ok, in this answer you get the idea http://stackoverflow.com/questions/8606660/save-domobject-as-string/8606809, i'm working on your jsfiddle... – I.G. Pascual Jan 05 '12 at 02:03

Tadeck · Answer 2 · 2012-01-05T01:55:47.053

Do not read HTML of existing DOM elements only to insert it again into the DOM. Use existing DOM elements and copy / move them, not their HTML. This will be a lot cleaner.

Needed prerequisites

What you need is:

.detach() for "cutting" element from DOM (without removing jQuery's data that may be attached), or .clone() to make a copy of element you want to keep in the current place,
.after() (or .insertAfter(), if you prefer opposite order or arguments) for inserting element after some other element,

Example for `.clone()` and for `.detach()`

The following example implements .clone() and .detach() on table's rows. In the first column you choose the row that will be copied / moved, and in the second column you choose the row after which you will paste the copied / moved row. After you have selected both rows, click on one of the links (depending on which function you want to test). See jsfiddle for demonstration.

HTML:

<table>
    <tr>
        <th>Which row?</th>
        <th>Copy after which?</th>
        <th>Original value</th>
    </tr>
    <tr>
        <td><input type="radio" name="from" checked="checked" /></td>
        <td><input type="radio" name="to" /></td>
        <td>AAAAA</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" checked="checked" /></td>
        <td>BBBBB</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" /></td>
        <td>CCCCC</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" /></td>
        <td>DDDDD</td>
    </tr>
</table>
<a href="#" title="" id="clone">Use .clone()</a>
<a href="#" title="" id="detach">Use .detach()</a>

JavaScript (executed onLoad or onDomReady, so it can find proper DOM elements):

jQuery('#clone').on('click', function(event){
    event.preventDefault();
    var from_row = jQuery('[name="from"]:checked').parents('tr');
    var to_row = jQuery('[name="to"]:checked').parents('tr');
    to_row.after(from_row.clone());
});
jQuery('#detach').on('click', function(event){
    event.preventDefault();
    var from_row = jQuery('[name="from"]:checked').parents('tr');
    var to_row = jQuery('[name="to"]:checked').parents('tr');
    to_row.after(from_row.detach());
});

See this jsfiddle for a proof that it works.

score 0 · Answer 3 · answered Jan 05 '12 at 01:53

The problem with your code is that find

Get the descendants of each element in the current set of matched elements.

Which in your code is the $docRow, so it is selecting all that matchs your .docRow a[name="178"]' then .parent().parent() gets all the <td>'s inside the matched row, so obviously, in the next step when you search inside it for <tr> you won't find any thing becouse you are searching in the current <tr>. so you need to rethink about what you are trying to do becouse that way it wont work, may be as an alternative solution, try to search for 'tr.docClassesRow' then search its descendants for those anchors that has a[name="178"]'.

I agree, MGA. Nacho's update to my Fiddle showed that clearly in the alert that popped up. I need to get the `` tag as well. — marky, Jan 05 '12 at 02:00

How to get specific row's HTML into a jquery variable

3 Answers3

Needed prerequisites

Example for .clone() and for .detach()

Example for `.clone()` and for `.detach()`