Question

<div id="MainTimeSheetDetails">
 <input type="button" style="float:right" class="btn btn-danger"value="Delete">
<input type="button"  style="float:right" class="btn btn-warning" value="Recall">
<input type="button" class="btn btn-info" style="float:right" value="Submit">

<input  onclick="btnsave()" type="button" class="btn btn-success"  style="float:right" value="Save">
<table class="table table-bordered" id="mytable">
    <tr>
        <th width="20%">Project</th>
        <th width="30%">Tasks <input onclick="LoadPreviousWeek()" type="button" id="btnNext"  style="width:20px;float:right" value="<" /> </th>

        @{DateTime Date = ViewBag.StartDate;}
        @for (int i = 1; i < 8; i++)
        {
            <th>@Html.Raw(Date.AddDays(i).ToString("ddd  dd"))</th>

        }
        <td class="success"><input onclick="LoadNextWeek()" type="button" style="width:20px;float:left" value=">" />Total</td>

    </tr>

    @{
        List<TSM.Models.Tasks> lstTasks = ViewBag.Tasks;
    }
    @foreach (TSM.Models.Projects.Project item in ViewBag.Project)
    {
        <tr>

        <td colspan="10"  style="background-color:antiquewhite;">@item.ProjectName </td>
    </tr>

        foreach (TSM.Models.Tasks itm in lstTasks.Where(x => x.Project.ID == item.ID).ToList())
        {
            <tr id="tmsData">
                <td>&nbsp;</td>
                <td>@itm.TaskName</td>

                @for (int i = 1; i < 8; i++)

                  {

                    <td > <input class="txtTaskHours date@(Date.AddDays(i).ToString("MMddyyyy"))" style="width:50px;"   type="number" id="@(itm.ID.ToString() + ':' + Date.AddDays(i).ToString("MMddyyyy"))" /></td>
                }
                <td><strong><input class="JKL" style="width:50px" /></strong></td>
               </tr>
               <tr>


               </tr>
        }

    }

        <tr>
            <td></td>
            <td></td>
            @for (int i = 1; i < 8; i++)
            {

                <td ><strong><input class="JKLL " id="Tue" style="width:50px" /></strong></td>

            }
            <td></td>


        </tr>

</table>

   <script> 

                    $(document).ready(function () {

                        $(".txtTaskHours").on('keyup change', calculateSum);
                    });

                    function calculateSum() {
                        var $input = $(this);
                        var $row = $input.closest('tr');
                        var sum = 0;

                        $row.find(".txtTaskHours").each(function () {
                            sum += parseFloat(this.value) || 0;
                        });

                        $row.find(".JKL").val(sum.toFixed(2));
 </script>

这是我的脚本method.sum的行已经完成但是如何做列的总和。对于我使用这个脚本方法的行和行的总和很好但是如何使用这个脚本方法的列的总和像这个行方法的多列。所有不同行的总和显示在不同的文本框中。然后如何显示每个列的总和显示在不同的文本框中

Answer 1

首先，将您的数据行更改为class="tmsData"，而不是id="tmsData"

<tr class="tmsData">
    ...
    ...
    ...
</tr>

然后......

$(document).ready(function () {
    $(".txtTaskHours").on('keyup change', function() {
        var $rows = $(this).closest('table').find('tr.tmsData'); // select all qualifying rows
        var columnTotals = [];
        $rows.each(function(i, row) {
            var $row = $(row);
            var rowTotal = $row.find(".txtTaskHours").get().reduce(function(runningRowTotal, hoursInput, j) { // use Array#reduce() to calculate row total
                var val = parseFloat(hoursInput.value) || 0;
                columnTotals[j] = (columnTotals[j] || 0) + val; // accumuulate column totlas during the rowTotal reduction
                return runningRowTotal + val;
            }, 0);
            $row.find(".JKL").val(rowTotal.toFixed(2));
        });
        $("input.JKLL").each(function(i) { // select all column total elements
            this.value = columnTotals[i];
        });
    });
});

如何做列的总和。发生一行

1 个答案: