Prevent Edit Mode on Clicking Link

The clicked row should switch to edit mode (and all other rows exit edit mode) when any part of the row is clicked EXCEPT the Checkbox and Anchor Tag in that row. Anchor tag should behave normally (load URL in new window). Entering edit mode: 1) writes the text of the label in each cell to the textbox in that same cell 2) hides the labels in the row 3) displays the buttons and textboxes in that row Exiting edit mode (either by clicking a different row or clicking the row's Cancel button) does the exact opposite of the above (except the textbox is cleared, not written back to the label)

by eventide

HTML

<table id="tblViewEditAllBranches">
    <thead>
        <tr>
            <th>
                <input type="submit" id="btnDeleteCheckedBranches" value="Delete" title="Delete Selected Branches"
                class="ui-button ui-widget ui-state-default ui-corner-all" role="button"
                aria-disabled="false">
            </th>
            <th>Branch Name</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <tr class="viewEditRow rowBorder">
            <td class="deleteBranch">
                <input type="checkbox" class="chkDeleteBranch" name="deleteBranches[]"
                value="1">
                <br>
                <input type="submit" class="cancelListEditBranch edit hideOnLoad" value="Cancel"
                title="Cancel editing this branch">
                <br>
                <input type="submit" class="submitListEditBranch edit hideOnLoad" value="Save"
                title="Save the changes">
            </td>
            <td class="viewEditBranchName">
                <label class="viewBranchName detailDisplay" style="display: inline;">Atlanta</label>
                <input type="text" class="edit editBox editName hideOnLoad"
                value="Atlanta">
                <br>
                <br>
                <label id="lblBranchesListEditError" class="errorMsg"></label>
            </td>
            <td class="viewEditBranchUrl">
                <!--<label class="viewBranchUrl detailDisplay" style="display: inline;">georgia</label>-->
                <label class="viewBranchUrl detailDisplay"><a href="http://www.google.com" target="_blank" class="branchDetailLink" title="Click to go the branch\'s web page">georgia</a></label>
                <input type="text" class="edit editBox editUrl hideOnLoad" value="georgia">
            </td>
        </tr>
        <tr class="viewEditRow rowBorder">
            <td class="deleteBranch">
                <input type="checkbox" class="chkDeleteBranch"...

CSS

#tblViewEditAllBranches { width: 100%; }

#tblViewEditAllBranches th,
#tblViewEditAllBranches td { border: 1px solid #CCC; }

.hideOnLoad { display: none; }

JavaScript

// Switch to Edit Mode for clicked row, cancel edit mode for all other rows
$('#tblViewEditAllBranches').on('click', 'tr', function (e) {
    // Put text of labels into textboxes
    $(this).find('td').each(function () {
        $(this).find('.editBox').val($(this).find('.detailDisplay').text());
    });

    // Clear errors
    $('#tblViewEditAllBranches tr').find('#lblBranchesListEditError').text('');

    // Hide edit elements in other rows and labels in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('.edit').fadeOut(200);
    $('label', this).fadeOut(200);

    // Show labels in other rows and edit elements in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('label').delay(200).fadeIn(200);
    $('.edit', this).delay(200).fadeIn(200);

    e.stopPropagation();
});

// Cancel Edit Mode by clicking Cancel button
$('#tblViewEditAllBranches').on('click', 'tr input.cancelListEditBranch', function (e) {

    var $tr = $('#tblViewEditAllBranches tr input.cancelListEditBranch').parent().parent();

    $tr.find('label#lblBranchesListEditError').text('');

    // Clear the textbox
    $tr.find('td').each(function () {
        $(this).find('.editBox').val('');
    });
    
    // Copy the label's text to the edit boxes in case the user changed something
    //$tr.find('td').each(function () {
    //    $(this).find('.editBox').val($(this).find('.detailDisplay').text());
    //});

    // Show the labels and hide the edit elements
    $tr.find('.edit').fadeOut(200);
    $tr.find('.detailDisplay').delay(200).fadeIn(200);
    $tr.find('.viewListEditBranchCoverage').delay(200).fadeIn(200);
    e.stopPropagation();
});