javascript - jQuery 高尔夫记分牌

Question

我有点努力使用正确的 jquery 来遍历我的值表并执行以下计算......

我有一行带有类输入的用户输入，或者可以是一个数组。

然后，具有 class = par 的 par 值的一行可以是一个数组。和一排孔结果（par-strokes）。

然后我想把总数放在具有类 rtot 的行的最后一个 td 中。

任何帮助将不胜感激！

http://jsfiddle.net/ZGTHz/1/

<style>
table { border:1px solid #ccc; border-collapse:collapse; width:600px; }
td {border:1px solid #ccc; padding:3px 5px 3px 3px; text-align:center; height:24px; }
.name{ font-weight:bold; }
#s1{ color:#ccc; }
.par2 { display:none; }
</style>

<table>

<tr id="par"><td class="nd name"></td><td class="par">4</td><td class="par">3</td><td class="par">5</td><td class="par">3</td><td class="par">5</td><td class="par">4</td><td class="par">2</td><td class="par">3</td><td class="par">4</td><td class="par">3</td><td class="par">5</td><td class="par">3</td><td class="par">5</td><td class="par">4</td><td class="par">2</td><td class="par">3</td><td class="par par2">4</td><td class="par par2">3</td><td class="par par2">5</td><td class="par par2">3</td><td class="par par2">5</td><td class="par par2">4</td><td class="par par2">2</td><td class="par par2">3</td><td class="par par2">4</td><td class="par par2">3</td><td class="par par2">5</td><td class="par par2">3</td><td class="par par2">5</td><td class="par par2">4</td><td class="par par2">2</td><td class="par par2">3</td><td class="nd"></td></tr>

<tr class="r"><td class="nd name">Smith / Williams</td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="nd rtot"></td></tr>

<tr class="s"><td class="nd name">User input</td><td class="input">3</td><td class="input">4</td><td class="input">4</td><td class="input">2</td><td class="input">4</td><td class="input">3</td><td class="input">1</td><td class="input">2</td><td class="input">3</td><td class="input">2</td><td class="input">4</td><td class="input">2</td><td class="input">4</td><td class="input">3</td><td class="input">1</td><td class="input">2</td><td class="nd rtot"></td></tr>

<tr><td class="nd name">Smith / Williams</td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="val"></td><td class="nd rtot"></td>
</tr>

<tr class="s"><td class="nd name">User input</td><td class="input">1</td><td class="input">3</td><td class="input">2</td><td class="input">1</td><td class="input">3</td><td class="input">2</td><td class="input">1</td><td class="input">3</td><td class="input">2</td><td class="input">1</td><td class="input">3</td><td class="input">2</td><td class="input">3</td><td class="input">2</td><td class="input">1</td><td class="input">3</td><td class="nd"></td></tr>

</table>

<script>

$(document).ready(function() {

var sum = 0;

$('tr .input').each(function () {

    var ind = $('.input').index(this);
    var par = Number($('.par').eq(ind).html());
    var sc = Number($('.input').eq(ind).html());
    var tot = sc-par;
    sum += tot;
    $('.val').eq(ind).html(sum);

});

});


</script>

Answer 1

$(document).ready(function () {
    var sum1 = 0;
    var sum2 = 0;
    $('tr .par').each(function (ind) {

        var par = Number($('.par').eq(ind).html());
        var sc1 = Number($('.t1 .input').eq(ind).html());
        var sc2 = Number($('.t2 .input').eq(ind).html());
        var tot1 = sc1 - par;
        $('.t1 .val').eq(ind).html(tot1);
        var tot2 = sc2 - par;
        $('.t2 .val').eq(ind).html(tot2);

        sum1 += tot1;
        sum2 += tot2;
    });

    $('.t1 .rtot').html(sum1);
    $('.t2 .rtot').html(sum2);

});

这是您的小提琴背后的 html：http: //jsfiddle.net/wVtjz/

Answer 2

您可以像这样重置总和并像这样访问 rtot

$('tr.s').each(function () {
   var sum = 0;
   $(this).find(".input").each(function(){
       var ind = $('.input').index(this);
       var par = Number($('.par').eq(ind).html());
       var sc = Number($('.input').eq(ind).html());
       var tot = sc-par;
       sum += tot;
       $('.val').eq(ind).html(sum);
   });    
   $(this).find(".rtot").html(sum);
});    

jsfiddle