jQuery高尔夫记分牌

时间:2013-05-13 20:28:40

标签: javascript jquery

我在使用正确的jquery进行迭代以迭代我的值表并执行以下计算...

我有一行用户输入和类输入,或者可能是一个数组。

然后,对于class = par的par值,一行可以是一个数组。和一行用于洞的结果(标准杆)。

然后我想将总数放在具有类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>

2 个答案:

答案 0 :(得分:1)

您可以像这样重置总和并像这样访问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

答案 1 :(得分: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/