表格单元格的总计值，但每行只允许有一个值

Question

我正在尝试创建一个记分卡程序，该程序允许用户选择表格的单元格并计算分数，我处于某个位置添加用户点击的每个分数（坦率地说，可能是一种非常笨拙的方式），但我的问题是逻辑工作的方式是每行只能选择一个值。这里有一个例子 - http://jsfiddle.net/5q9nS/2/

为了澄清，如果用户选择“＃a1”值应该被添加到总数“2”。如果用户然后选择“＃b1”，则该值应该减去先前选择的值，因为不允许来自同一行的重复值。然而，总数应该添加从行a2-c2，a3-e3，a4-c4等行中选择的任何值.....

我希望这很清楚，所选类的逻辑可以尝试并进一步演示。

任何帮助将非常感激！正如你将能够告诉我只是在学习曲线上，需要登顶。

HTML

<table width="100%" id="pcpScoring"> 
    <tr> 
    <td width="30%">&nbsp;</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">&nbsp;</td> 
    <td width="14%" align="center">&nbsp;</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">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td class="tblLabel">1-2 years</td> 
    <td class="tblLabel">3 years</td> 
    <td class="tblLabel">4 years</td> 
    <td align="center">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
    </tr> 
    <tr valign="top"> 
    <td>How often would you &quot;ideally&quot; 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">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</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>&nbsp;</td> 
    <td class="tblLabel">Part Exchange</td> 
    <td class="tblLabel">Private Sale</td> 
    <td class="tblLabel">Pass on to Famiy</td> 
    <td class="tblLabel">&nbsp;</td> 
    <td class="tblLabel">&nbsp;</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">&nbsp;</td> 
    <td align="center">&nbsp;</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); 

} 


}); 

Answer 1

可以完成所有你需要的点击函数中：

$('.tblNumber a').click(function() { 
    $(this).parents('tr').find('a').removeClass('selected'); 
    $(this).addClass('selected'); 
    var total = 0; 
    $('.tblNumber .selected').each(function() { 
     total += parseInt($(this).text()); 
    }); 
    $('#pcpScore').text(total); 
}); 

逐行它：清除该行中先前选择的项目，通过表中所选择的项目选择当前项目，然后遍历添加到总数然后设置pcpScore跨度中的文本。

编辑：工作的jsfiddle例如：http://jsfiddle.net/cbailster/ycymB/

Answer 2

您可以使用jQuery中的 “每个” 方法遍历每个行。 http://api.jquery.com/jQuery.each/

$('table tr').each(function() { /*Magic Happens Here*/ }); 

然后，您可以通过使用 “EQ（）” 选择针对特定细胞 http://api.jquery.com/eq-selector/

$('table tr').each(function() { 
    var value = $(this).find('td:eq(1)').text(); //second cell in the row 
}); 

你甚至可以只使用一个单一的选择

$('table tr td:eq(1)').each(function() { 
    var value = $(this).text(); //second cell in the row 
}); 

使用选择器，你会明白;-)

Answer 3

这里是一个有效的解决方案：http://jsfiddle.net/5q9nS/2/

而且JS：

var totalDiv = $('#pcpScore'); 

$('.tblNumber').click(function(){ 
    var $this = $(this); 
    if(!$this.hasClass('selected')){ 
     var prevSelected = $this.siblings('.selected'); 
     $this.addClass('selected'); 
     prevSelected.removeClass('selected'); 

     var currentTotal = +totalDiv.text(); //the plus sign converts this to a number 
     var prevSelectedVal = +prevSelected.children('a').text(); 
     var newSelectedVal = +$this.children('a').text(); 
     totalDiv.text(currentTotal + newSelectedVal - prevSelectedVal); 
    } 
}); 

首先我们存储持有总在变，因为我们将需要每次.tblNumber是访问它的元素点击。这使脚本更高效，因为它不必每次都重新找到该元素。

之后，我们简单地将点击事件处理程序绑定到每个.tblNumber元素。然后，我们使用jQuery的DOM遍历方法取消选择该行中先前选择的.tblNumber，并获取其值和新值，以便我们可以适当调整总数。

查看了您的原始代码后，显着缩短它的关键就像我在这里做的是this关键字。虽然this在JS中可能是一个复杂的主题，但当在这样的事件处理程序（.click(function(){...})）中使用时，它指的是触发该事件的元素。因此，它为我们提供了事件的上下文，这正是允许我们识别正确的单元格的方法，而不是像以前那样为每个单元格绑定一个稍微不同的单击事件处理程序。