rowSelector

HTML

<table class="grid">
    <tr><th colspan=4 class="subTitle1">Statins</th></tr>
    <tr>
        <th>Medication</th>
        <th>Dose</th>
        <th>Route</th>
        <th>Freq</th>
    </tr><tr>
        <td class="hangingIndent">
            <input type="checkbox" value="true" name="chkMedStatinLipitor" id="chkMedStatinLipitor" />
            atorvastatin (LIPITOR)
        </td><td>
            <select name="cboMedLipitorDose" size="1" id="cboMedLipitorDose">
                <option value="10 MG">10</option>
                <option value="20 MG">20</option>
                <option value="40 MG">40</option>
                <option value="60 MG">60</option>
                <option value="80 MG">80</option>
            </select> mg
        </td><td>
            <select name="cboMedLipitorRoute" size="1" id="cboMedLipitorRoute">
                <option>ORAL</option>
                <option>TUBE</option>
            </select>
        </td><td>
            <select name="cboMedLipitorFreq" size="1" id="cboMedLipitorFreq">
                <option>DAILY</option>
                <option>QPM</option>
            </select>
        </td>
    </tr><tr>
        <td class="hangingIndent">
            <input type="checkbox" value="true" name="chkMedStatinMevacor" id="chkMedStatinMevacor" />
            lovastatin (MEVACOR)
        </td><td>
            <select name="cboMedMevacorDose" size="1" id="cboMedMevacorDose">
                <option value="10 MG">10</option>
                <option value="20 MG">20</option>
                <option value="40 MG">40</option>
                <option value="60 MG">60</option>
                <option value="80 MG">80</option>
            </select> mg
        </td><td>
            <select name="cboMedMevacorRoute" size="1" id="cboMedMevacorRoute">
                <option>ORAL</option>
                <option>TUBE</option>
            </select>
        </td><td>
            <select name="cboMedMevacorFreq" size="1" id="cboMedMevacorFreq">
    ...

CSS

* { font-size: 9pt; font-family: tahoma, verdana, sans-serif; }
table { width: 100%; border-collapse: collapse; }
table th {
    border-top: #cccccc 1pt solid;
    border-bottom: #cccccc 1pt dotted;
    padding-left: 12px;
    font-weight: bold;
    font-size: 10pt;
    vertical-align: top;
    color: #000000;
    line-height: 15pt;
    background-color: #eeeeee;
    text-align: left;
}
table td {
    padding: 2px 0 2px 12px;
    vertical-align: top;
    text-align: left;
}
th.subTitle1 {
    background: #005595;
    color: #ffffff;
}
table.grid td {
    border-bottom: #cccccc 1pt dotted;
    border-right: #cccccc 1pt dotted;    
}
tr.rowHover { background: #ccccff; }
tr.rowSelected { background: #ffffaa; }

label.w1 { display: inline-block; width: 150px; text-indent: 0px; }

JavaScript

/*
* rowSelector - jQuery Based Row Selector for HEO iForms
* http://heo-iforms.blogger.com/
*
* Version: 1.0
* Copyright 2012 Scott Morris - http://heo-iforms.blogger.com/
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
*/
 (function( $ ){  
    var methods = {
        init : function(options) {
            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'hoverClass' : 'rowHover',
                'selectedClass' : 'rowSelected'
            }, options);

            var $this = $(this);
            return this.each(function() {
                $(this).find('tr').addClass('clickable')
                    .hover(function() {
                        $(this).addClass(settings.hoverClass);
                    }, function() {
                        $(this).removeClass(settings.hoverClass);
                    })
                    .bind('click', function() {
                        var $obj = $(this).find('input:radio, input:checkbox').first();
                        if ($obj.attr('type') == 'radio') {
                            $obj.attr('checked',true);
                        } else {
                            var checked = ($obj.attr('checked') !== undefined) ? true : false;
                            $obj.attr('checked',!(checked));
                        }
                        $obj.trigger('update');
                    })
                    .find('input, select').click(function(e) {
                        e.stopPropagation();
                    });
                
                $(this).find('tr input:checkbox, tr input:radio')
                    .bind('click',function() { $(this).trigger('update'); })
                    .bind('update', function () {
                        if ($(this).attr('checked') !== undefined) {
                           ...