SO - 30610731

by Arun P Johny

HTML

<div id="ldrm-rubric-loaded">
    <table class="ldrm" cellspacing="0">
        <thead>
            <tr class="remove">
                <th></th>
                <th></th>
                <th></th>
                <th><span class="btn"></span>

                </th>
                <th><span class="btn"></span>

                </th>
                <th><span class="btn"></span>

                </th>
            </tr>
            <tr class="points">
                <th></th>
                <th></th>
                <th class="rb-top">8</th>
                <th class="rb-top">6</th>
                <th class="rb-top">4</th>
                <th class="rb-top">2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td class="rb-left">Category</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
            </tr>
            <tr>
                <td><span class="btn"></span>

                </td>
                <td class="rb-left">Category</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
            </tr>
            <tr>
                <td><span class="btn"></span>

                </td>
                <td class="rb-left">Category</td>
                <td class="choice">Enter the details of how to earn this amount of points!</td>
       ...

CSS

#ldrm-rubric-loaded {
    margin-top:15px;
}
#ldrm-rubric-loaded .ldrm tr.remove {
    display:none;
}
#ldrm-rubric-loaded .ldrm tr.points th:first-child {
    display:none;
}
#ldrm-rubric-loaded .ldrm tbody tr td:first-child {
    display:none;
}
#ldrm-rubric-loaded .choice {
    cursor:pointer;
}
#ldrm-rubric-loaded .choice.selected {
    background:#d1e0be;
}

JavaScript

var total = 0,
    $headers = jQuery('#ldrm-rubric-loaded thead tr.points th');
jQuery('#ldrm-rubric-loaded td.choice').click(function () {
    var $this = jQuery(this),
        $prev;
    if (!$this.hasClass('selected')) {
        $prev = $(this).siblings('.selected').removeClass('selected');

        if ($prev.length) {
            total -= +$headers.eq($prev.index()).html() || 0;
        }
        total += +$headers.eq($this.index()).html() || 0;

        $this.addClass('selected');
        jQuery(this).siblings().removeClass('selected');
        var trackChanges = jQuery('#ldrm-rubric-loaded').clone().html();
        jQuery('#ldrm_assignment_content').val(trackChanges);


        jQuery('#ldrm-points-earned').html('Points Earned: ' + total);
        alert(total);
    } //else don't do anything since it is already selected

});