I’m trying to create a scorecard program which allows the user to select cells of a table and gauge a score, I’m at a point where I can add each score the user clicks (admittedly in probably a very clunky way) but my problem is that the way the logic works is that only one value per row can be chosen. Here’s an example – http://jsfiddle.net/5q9nS/2/
To clarify, if the user chooses “#a1” the value of “2” should be added to the total. If the user then selects “#b1” this value should subtract the previously selected value because duplicate values from the same row are not allowed. However the total should add any value choosen from the rows a2-c2, a3-e3, a4-c4 etc…..
I hope that’s clear, the logic for the selected classes works to try and further demonstrate.
Any help would be hugely appreciated! As you will be able to tell i’m just on the learning curve and need to hit the summit.
HTML
<table width="100%" id="pcpScoring">
<tr>
<td width="30%"> </td>
<td width="14%" class="tblLabel">Own Savings</td>
<td width="14%" class="tblLabel">Bank or B.S. Loan</td>
<td width="14%" class="tblLabel">Dealer Finance</td>
<td width="14%" align="center"> </td>
<td width="14%" align="center"> </td>
</tr>
<tr valign="top">
<td>How do you normally fund your vehicle?</td>
<td class="tblNumber"><a id="a1">2</a></td>
<td class="tblNumber"><a id="b1">4</a></td>
<td class="tblNumber"><a id="c1">3</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">1-2 years</td>
<td class="tblLabel">3 years</td>
<td class="tblLabel">4 years</td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr valign="top">
<td>How often would you "ideally" like to change your vehicle?</td>
<td class="tblNumber"><a id="a2">4</a></td>
<td class="tblNumber"><a id="b2">2</a></td>
<td class="tblNumber"><a id="c2">1</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">upto 6,000</td>
<td class="tblLabel">6-12,000</td>
<td class="tblLabel">12-18,000</td>
<td class="tblLabel">18-25,000</td>
<td class="tblLabel">over 25,000</td>
</tr>
<tr valign="top">
<td>How many miles do you drive per year?</td>
<td class="tblNumber"><a id="a3">5</a></td>
<td class="tblNumber"><a id="b3">4</a></td>
<td class="tblNumber"><a id="c3">3</a></td>
<td class="tblNumber"><a id="d3">2</a></td>
<td class="tblNumber"><a id="e3">1</a></td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">Part Exchange</td>
<td class="tblLabel">Private Sale</td>
<td class="tblLabel">Pass on to Famiy</td>
<td class="tblLabel"> </td>
<td class="tblLabel"> </td>
</tr>
<tr valign="top">
<td>How do you usually dispose of your vehicle? </td>
<td class="tblNumber"><a id="a4">4</a></td>
<td class="tblNumber"><a id="b4">2</a></td>
<td class="tblNumber"><a id="c4">1</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td colspan="6" class="tblNumber" style="text-align:right"><span class="total">Total Score</span><span id="pcpScore" class="total">0</span></td>
</tr>
</table>
jQuery
$(document).ready(function(){
//PCP Scorecard on Click add class
$('.tblNumber a').click(function() {
$(this).addClass('selected');
});
$('#a1').click(function() {
$(this).addClass('selected');
$('#b1, #c1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b1').click(function() {
$(this).addClass('selected');
$('#a1, #c1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c1').click(function() {
$(this).addClass('selected');
$('#a1, #b1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a2').click(function() {
$(this).addClass('selected');
$('#b2, #c2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b2').click(function() {
$(this).addClass('selected');
$('#a2, #c2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c2').click(function() {
$(this).addClass('selected');
$('#a2, #b2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a3').click(function() {
$(this).addClass('selected');
$('#b3, #c3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b3').click(function() {
$(this).addClass('selected');
$('#a3, #c3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c3').click(function() {
$(this).addClass('selected');
$('#a3, #b3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#d3').click(function() {
$(this).addClass('selected');
$('#a3, #c3, #e3, #b3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#e3').click(function() {
$(this).addClass('selected');
$('#a3, #b3, #c3, #d3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a4').click(function() {
$(this).addClass('selected');
$('#b4, #c4').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b4').click(function() {
$(this).addClass('selected');
$('#a4, #c4').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c4').click(function() {
$(this).addClass('selected');
$('#a4, #b4').removeClass('selected');
addUp(parseInt($(this).text()));
});
function addUp(addScore) {
var totalScore = (parseInt($('#pcpScore').text())) + addScore;
$('#pcpScore').html(totalScore);
}
});
You can accomplish all you need within the click function:
Line by line it: Clears the previously selected items in the row, selects the current item, then iterates over the selected items in the table adding to the total then sets the text in the pcpScore span.
EDIT: Working jsfiddle example: http://jsfiddle.net/cbailster/ycymB/