Get row's HTML

Copy all rows with class "docClassesRow" based on first row's input value

by eventide

HTML

<table id="docsTable" cellpadding="3" border="1">
    <thead>
        <tr class="tableHeader" style="border-top-left-radius: 10px; -moz border-top-left-radius: 10px;">
            <td colspan="2"></td>
            <td width="245px">Document Name</td>
            <td width="355px">Document Description</td>
            <td width="200px">File Name</td>
            <td width="50px">Downloads</td>
        </tr>
    </thead>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="178" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="178" /></td>
            <td class="docAndClassTitle">Underwater Basketweaving</td>
            <td>Beginner's guide to underwater basketweaving</td>
            <td>basketweavingforbeginners.pdf</td>
            <td class="numDownloads"><span style="padding-left: 25px;">0</span></td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="180-178" /></td>
            <td colspan="4">ATEST5300</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-178" /></td>
            <td colspan="4">QTEST7075</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-178" /></td>
            <td colspan="4">TEST5220</td>
        </tr>
    </tbody>
</table>

JavaScript

var docID = '178';
var classesForNewDoc = '';

// Set the doc's row to a variable for easier reading
$docRow = $('.docRow a[name="' + docID + '"]').parent().parent();

// Get the HTML for all class rows for the doc into a variable
$docRow.parent().find('tr.docClassesRow').each(function() {
    var strElem = $(this).outerHTML;
    if(strElem == null) {
        strElem = $('<div>').append($(this).clone()).html();
    }
    classesForNewDoc += strElem;
});

alert('getting inserted: ' + classesForNewDoc);

// Insert the retrieved HTML into the table after a specific doc's row
// In the production version this docID will be different from the above docID
//    also, there will be no rows after the doc row that is getting the inserted HTML
$('#docsTable a[name="' + docID + '"]').parents("tr:first").closest('tr').after(classesForNewDoc);