Insert row alphabetically on cell text with docs

This is an expansion of an earlier Fiddler that only added the class - this needs to add the class and any checked documents.

by eventide

HTML

<table id="classesTable" style="border-collapse: collapse" cellpadding="3">
    <thead>
        <tr class="tableHeader">
            <td colspan="2"></td>
            <td width="245px"><b>Class Number</b></td>
            <td width="600px"><b>Class Name</b></td>
        </tr>
    </thead>
    <tbody>
        <tr class="classRow">
            <td width="35px"><a class="classEditLink classAdminFormSubmit edit" name="33" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="33" /></td>
            <td>CLASS1111</td>
            <td>Class 1111 description</td>
        </tr>
        <tr class="classDocsRow noDocs">
            <td colspan="4" width="850px">
                <strong>No documents are currently associated with this class.</strong>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr class="classRow">
            <td width="35px"><a class="classEditLink classAdminFormSubmit edit" name="153" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="153" /></td>
            <td>CLASS2222</td>
            <td>Class 2222 description</td>
        </tr>
        <tr class="classDocsRow noDocs">
            <td colspan="4" width="850px">
                <strong>No documents are currently associated with this class.</strong>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr class="classRow">
            <td width="35px"><a class="classEditLink classAdminFormSubmit edit" name="45" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="45" /></td>
            <td>CLASS3333</td>
            <td>Class 3333 description</td>
        </tr>
        <tr class="classDocsRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="35-45" /></td>
  ...

CSS

body {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    margin: auto; }

.tableHeader {
    background-color: #A04A56;
    color: #FFFFFF;
    font-size: 1.1em;
    font-weight: bold; }

.classRow {
    background-color: #EFE5D3;
    font-weight: bold;
    font-size: 1.1em; }

JavaScript

// Add the class in alphabetical order by class number
var buildClassRow = function(classID, classNumber, className, addDocs) {
    var newRow = '';

    newRow += $('#classesTable tbody:last').after('<tbody>' + '<tr class="classRow">' + '<td width="35px"><a class="classEditLink classAdminFormSubmit edit" name="' + classID + '" href="#">Edit</a></td>' + '<td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="' + classID + '" /></td>' + '<td>' + classNumber + '</td>' + '<td>' + className + '</td>' + '</tr>');

    alert($('#docsTable input[type="checkbox"]:checked').parent('tr').find('td:eq(0)').val());

    if (addDocs == 'true') {
        // Add to the new class any documents that are checked in the table
        $('#docsTable input[type="checkbox"]:checked').each(function() {
            var $row = $(this).parents('tr');
            var docID = $row.find('td:eq(0) input').val();
            var docName = $row.find('td:eq(1)').html();
            var docDescription = $row.find('td:eq(2)').text();

            alert('docID: ' + docID + ', docName: ' + docName + ', docDescription: ' + docDescription);

            newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' + '<td></td>' + '<td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="' + docID + '-' + classID + '" /></td>' + '<td width="245px">' + docName + '</td>' + '<td width="600px">' + docDescription + '</td>' + '</tr>');
        });
        // No more docs to add, close the tbody
        newRow += append('</tbody>');

    } else {
        // No docs to add, add the "no docs" message and close the tbody
        newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' + '<td colspan="4">' + '<strong>No documents are currently associated with this class.</strong>' + '</td>' + '</tr>' + '</tbody>');
    }
    return newRow;
}

var addClassRow = function(classID, classNumber, className, addDocs) {
  ...