jquery - jQuery：桌上足球的总和

Question

我英语不好。我的文字有什么问题^^抱歉:)

我的桌上足球中有数据。 jsfiddle

我无法构建一个函数来计算表中的所有行。当页面完成加载或单击行以编辑文本文件中的值。jQuery 将自动计算。

GP = 玩过的游戏 = HOME(W+D+L) + AWAY(W+D+L)

概括

W = HOME_W + AWAY_W

D = HOME_D + AWAY_D

L = HOME_L + AWAY_L

F = HOME_F + AWAY_F

A = HOME_A + AWAY_A

GD = 摘要(F) - 摘要(A)

HTML

<table id="table-pts">
<thead>
    <tr>
        <th colspan="3">&nbsp;</th>
        <th colspan="5">HOME</th>
        <th colspan="5">AWAY</th>
        <th colspan="5">SUMMARY</th>
        <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <th>Pos</th>
        <th class="team">Team</th>
        <th>GP</th>
        <th>W</th>
        <th>D</th>
        <th>L</th>
        <th>F</th>
        <th>A</th>
        <th>W</th>
        <th>D</th>
        <th>L</th>
        <th>F</th>
        <th>A</th>
        <th>W</th>
        <th>D</th>
        <th>L</th>
        <th>F</th>
        <th>A</th>
        <th>GD</th>
        <th>Pts</th>
    </tr>
</thead>
<tbody>
        <tr id="1" class="edit_tr">
            <td></td>
            <td class="team">
            &nbsp;
            </td>
            <td><span id="summary_GP_1"></span></td>
            <td>
                <span id="home_w_1" class="text">1</span>
                <input type="text" value="1" class="editbox" id="home_w_input_1"/>
            </td>
            <td>
                <span id="home_d_1" class="text">3</span>
                <input type="text" value="3" class="editbox" id="home_d_input_1"/>
            </td>
            <td>
                <span id="home_l_1" class="text">2</span>
                <input type="text" value="2" class="editbox" id="home_l_input_1"/>
            </td>
            <td>
                <span id="home_f_1" class="text">4</span>
                <input type="text" value="4" class="editbox" id="home_f_input_1"/>
            </td>
            <td>
                <span id="home_a_1" class="text">76</span>
                <input type="text" value="76" class="editbox" id="home_a_input_1"/>
            </td>
            <td>
                <span id="away_w_1" class="text">8</span>
                <input type="text" value="8" class="editbox" id="away_w_input_1"/>
            </td>
            <td>
                <span id="away_d_1" class="text">9</span>
                <input type="text" value="9" class="editbox" id="away_d_input_1"/>
            </td>
            <td>
                <span id="away_l_1" class="text">10</span>
                <input type="text" value="10" class="editbox" id="away_l_input_1"/>
            </td>
            <td>
                <span id="away_f_1" class="text">11</span>
                <input type="text" value="11" class="editbox" id="away_f_input_1"/>
            </td>
            <td>
                <span id="away_a_1" class="text">12</span>
                <input type="text" value="12" class="editbox" id="away_a_input_1"/>
            </td>
            <td><span id="summary_w_1" ></span></td>
            <td><span id="summary_d_1" class="text"></span></td>
            <td><span id="summary_l_1" class="text"></span></td>
            <td><span id="summary_f_1" class="text"></span></td>
            <td><span id="summary_a_1" class="text"></span></td>
            <td><span id="summary_GD_1" class="text"></span></td>
            <td><span id="summary_Pts_1" class="text"></span></td>
        </tr>
        <tr id="2" class="edit_tr">
            <td></td>
            <td class="team">
            &nbsp;
            </td>
            <td><span id="summary_GP_2"></span></td>
            <td>
                <span id="home_w_2" class="text">1</span>
                <input type="text" value="1" class="editbox" id="home_w_input_2"/>
            </td>
            <td>
                <span id="home_d_2" class="text">3</span>
                <input type="text" value="3" class="editbox" id="home_d_input_2"/>
            </td>
            <td>
                <span id="home_l_2" class="text">2</span>
                <input type="text" value="2" class="editbox" id="home_l_input_2"/>
            </td>
            <td>
                <span id="home_f_2" class="text">4</span>
                <input type="text" value="4" class="editbox" id="home_f_input_2"/>
            </td>
            <td>
                <span id="home_a_2" class="text">76</span>
                <input type="text" value="76" class="editbox" id="home_a_input_2"/>
            </td>
            <td>
                <span id="away_w_2" class="text">8</span>
                <input type="text" value="8" class="editbox" id="away_w_input_2"/>
            </td>
            <td>
                <span id="away_d_2" class="text">9</span>
                <input type="text" value="9" class="editbox" id="away_d_input_2"/>
            </td>
            <td>
                <span id="away_l_2" class="text">10</span>
                <input type="text" value="10" class="editbox" id="away_l_input_2"/>
            </td>
            <td>
                <span id="away_f_2" class="text">11</span>
                <input type="text" value="11" class="editbox" id="away_f_input_2"/>
            </td>
            <td>
                <span id="away_a_2" class="text">12</span>
                <input type="text" value="12" class="editbox" id="away_a_input_2"/>
            </td>
            <td><span id="summary_w_2" ></span></td>
            <td><span id="summary_d_2" class="text"></span></td>
            <td><span id="summary_l_2" class="text"></span></td>
            <td><span id="summary_f_2" class="text"></span></td>
            <td><span id="summary_a_2" class="text"></span></td>
            <td><span id="summary_GD_2" class="text"></span></td>
            <td><span id="summary_Pts_2" class="text"></span></td>
        </tr>    
</tbody>

查询

    $(document).ready(function(){
    $(".edit_tr").click(function(){
        var ID = $(this).attr('id');
        $("#home_w_"+ID).hide();
        $("#home_d_"+ID).hide();
        $("#home_l_"+ID).hide();
        $("#home_f_"+ID).hide();
        $("#home_a_"+ID).hide();
        $("#away_w_"+ID).hide();
        $("#away_d_"+ID).hide();
        $("#away_l_"+ID).hide();
        $("#away_f_"+ID).hide();
        $("#away_a_"+ID).hide();

        $("#home_w_input_"+ID).show();
        $("#home_d_input_"+ID).show();
        $("#home_l_input_"+ID).show();
        $("#home_f_input_"+ID).show();
        $("#home_a_input_"+ID).show();
        $("#away_w_input_"+ID).show();
        $("#away_d_input_"+ID).show();
        $("#away_l_input_"+ID).show();
        $("#away_f_input_"+ID).show();
        $("#away_a_input_"+ID).show();
    }).change(function(){

        // calculate point in table football
        var ID = $(this).attr('id');
        var home_w = parseInt($("#home_w_input_"+ID).val());
        var home_d = parseInt($("#home_d_input_"+ID).val());
        var home_l = parseInt($("#home_l_input_"+ID).val());
        var home_f = parseInt($("#home_f_input_"+ID).val());
        var home_a = parseInt($("#home_a_input_"+ID).val());
        var away_w = parseInt($("#away_w_input_"+ID).val());
        var away_d = parseInt($("#away_d_input_"+ID).val());
        var away_l = parseInt($("#away_l_input_"+ID).val());
        var away_f = parseInt($("#away_f_input_"+ID).val());
        var away_a = parseInt($("#away_a_input_"+ID).val());

        var summaryW = home_w + away_w;
        var summaryD = home_d + away_d;
        var summaryL = home_l + away_l;
        var summaryF = home_f + away_f;
        var summaryA = home_a + away_a;
        var summaryGD = summaryF + summaryA;
        var summaryPts = summaryW * 3 +summaryD * 1;
        var summaryGP = summaryW + summaryD + summaryL;



       /* var dataString = 'id='+ ID + '&home_w='+ home_w + '&home_d='+ home_d + '&home_l='+ home_l + '&home_f='+ home_f + '&home_a='+ home_a + '&away_w='+ away_w + '&away_d='+ away_d + '&away_l='+ away_l + '&away_f='+ away_f + '&away_a='+ away_a + '&action=edit_pts';
        $("#home_w_"+ID).html('<img src="load.gif"/>');

        $.ajax({
            type: "POST",
            url: "table_pts_action_ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {*/

        // live update in my table football
                $("#home_w_"+ID).html(home_w);
                $("#home_d_"+ID).html(home_d);
                $("#home_l_"+ID).html(home_l);   
                $("#home_f_"+ID).html(home_f);
                $("#home_a_"+ID).html(home_a);
                $("#away_w_"+ID).html(away_w);
                $("#away_d_"+ID).html(away_d);
                $("#away_l_"+ID).html(away_l);
                $("#away_f_"+ID).html(away_f);
                $("#away_a_"+ID).html(away_a);

                $("#summary_w_"+ID).html(summaryW);
                $("#summary_d_"+ID).html(summaryD);
                $("#summary_l_"+ID).html(summaryL);
                $("#summary_f_"+ID).html(summaryF);
                $("#summary_a_"+ID).html(summaryA);
                $("#summary_GD_"+ID).html(summaryGD);
                $("#summary_Pts_"+ID).html(summaryPts);
                $("#summary_GP_"+ID).html(summaryGP);


         //   }
      //  });  
    });

    $("#table-pts tbody tr").each(function(){

        // page is load finish.. calculate point in table football
        var ID = $(this).attr('id');
        var txtHomeW = parseInt($("#home_w_"+ID).text());
        var txtHomeD = parseInt($("#home_d_"+ID).text());
        var txtHomeL = parseInt($("#home_l_"+ID).text());
        var txtHomeF = parseInt($("#home_f_"+ID).text());
        var txtHomeA = parseInt($("#home_a_"+ID).text());
        var txtAwayW = parseInt($("#away_w_"+ID).text());
        var txtAwayD = parseInt($("#away_d_"+ID).text());
        var txtAwayL = parseInt($("#away_l_"+ID).text());
        var txtAwayF = parseInt($("#away_f_"+ID).text());
        var txtAwayA = parseInt($("#away_a_"+ID).text()); 

        var summaryW = parseInt(txtHomeW+txtAwayW);
        var summaryD = parseInt(txtHomeD+txtAwayD);
        var summaryL = parseInt(txtHomeL+txtAwayL);
        var summaryF = parseInt(txtHomeF+txtAwayF);
        var summaryA = parseInt(txtHomeA+txtAwayA);
        var summaryGD = parseInt(summaryF-+summaryA);
        var summaryPts = parseInt(summaryW * 3 + summaryD * 1);
        var summaryGP = parseInt(summaryW + summaryD + summaryL);

        $(this).find("#summary_w_"+ID).text(summaryW);
        $(this).find("#summary_d_"+ID).text(summaryD);
        $(this).find("#summary_l_"+ID).text(summaryL);
        $(this).find("#summary_f_"+ID).text(summaryF);
        $(this).find("#summary_a_"+ID).text(summaryA);
        $(this).find("#summary_GD_"+ID).text(summaryGD);
        $(this).find("#summary_Pts_"+ID).text(summaryPts);
        $(this).find("#summary_GP_"+ID).text(summaryGP);

    });



    // Edit input box click action
    $(".editbox").mouseup(function(){
        return false
    });

    // Outside click action
    $(document).mouseup(function(){
        $(".editbox").hide();
        $(".text").show();
    });
});

CSS

    #table-pts{
    color: #333;
    text-align: center;
    font-size: 12px;
    width: 100%;
}
#table-pts tbody tr{
    border-bottom: 1px solid #dddcdc;
    padding: 10px;
    line-height: 30px;
}
#table-pts tbody td{
    vertical-align: middle;
    padding: 5px 0;
}

#table-pts thead tr th{
    text-align: center;
    line-height: 30px;
    background: #233825;
    color: #FFF;
    border-left: 1px solid #CCC;

    width: 30px;
}
#table-pts .table-team{
    width: 10px;
    text-align: left;
    padding: 3px 7px 3px 7px;
}
#table-pts .editbox{
    display: none;
    border: 1px solid #CCC;
    text-align: center;
}

#table-pts .odd{background: #fafafa;}
.table-hl
{
    width: 70px;
}
#table-pts input{
    width: 20px;
}

</p>

非常感谢。

score 1 · Accepted Answer

虽然我不能准确地得到你的问题陈述，但是你可以像这样得到列的总和。

  $(document).ready(function(){

        var sum = 0;
           jQuery('.text').each(function(){
              sum += parseInt(jQuery(this).text());   
            });
           console.log(sum);

  });

如果您想在一个 var 中获取两行的总和，请使用上面的代码。
否则，如果您想为两行单独求和，请为第二行元素分配不同的类，因为您现在已经在两行中分配了“测试”类。
更改类名后，对该类使用相同的代码。
您也可以在编辑单击或更改事件上使用该代码。

score 0 · Accepted Answer

只是另一个解决方案：

var tot = 0;       
 $('tbody tr').each(function() {
    $(this).find('.text').each(function(){
        tot += parseInt($(this).text());   
    });
    alert(tot);
    tot = 0;
});

总盐元素：

var sum, i, k;       
 $('tbody tr').each(function() {

     k = ($(this).find('.text').length / 2);

     for(i = 0; i < ($(this).find('.text').length / 2); i++){

         sum = parseInt($(this).find('.text').eq(i).text()) + parseInt($(this).find('.text').eq(k).text());                    
         k++;
         alert(sum);       
     }

});

jquery - jQuery：桌上足球的总和

2 回答 2

Related

Reference