如何将texbox的值分别加总rowise和columnwise并显示出来?

时间:2017-03-22 08:17:46

标签: jquery asp.net-mvc razor

我想要做的就是分别计算每行和每列的rowtotal columntotal和grandtotal

   <table class="table-bordered table-striped" id="example">
          @*Displays my project list headers from the database*@  

          <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Employee Id
                    </th>
                    <th>Cost Center</th>
                    @foreach (var item in Model.Projects)
                    {
                        <th>@Html.DisplayFor(p => item.ProjectName, new {@class = "projects" })</th>
                    }
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    @foreach (var item in Model.Projects)
                    {
                        <th>@Html.DisplayFor(p => item.Code.CodeName, new { Style = "width:5em;" })</th>
                    }
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    @foreach (var item in Model.Projects)
                    {
                        <th>@Html.DisplayFor(p => item.NetworkId)</th>
                    }
                    <th>Total</th>
                </tr>
            </thead>
     @*Displays my employee list from the database*@
            <tbody>
                @for (int i = 0; i < Model.ForecastInfoList.Count(); i++)
                {

                    <tr>
                        <td>@Html.DisplayFor(Emp1 => Model.ForecastInfoList[i].EmpName)</td>
                        <td>
                            @Html.HiddenFor(x => Model.ForecastInfoList[i].EmpId)
                            @Html.DisplayFor(Emp1 => Model.ForecastInfoList[i].EmpSapId)
                        </td>
                        <td>@Html.DisplayFor(Emp1 => Model.ForecastInfoList[i].CostCenter)</td>
                        @for (int j = 0; j < Model.ForecastInfoList[i].ProjectHours.Count(); j++)
                        {
                            <td>
                                @Html.HiddenFor(x => Model.ForecastInfoList[i].ProjectHours[j].EmpId)
                                @Html.HiddenFor(x => Model.ForecastInfoList[i].ProjectHours[j].ProjectMasterId)
                                @Html.HiddenFor(x => Model.ForecastInfoList[i].ProjectHours[j].Month)
                                @Html.TextBoxFor(x => Model.ForecastInfoList[i].ProjectHours[j].Hours, new { @class = "Hours", Style = "text-align:left; width:5em;" })  @*displays my textboxes*@
                            </td>
                        }
                        <td>
                            <span class="total_emp_value">
                                @Html.DisplayFor(x => Model.ForecastInfoList[i].EmpTotal)  @*displays my vertical total column*@
                            </span>
                        </td>

                    </tr>
                }
            </tbody>

            <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th>
                        Total
                    </th>
                    @for (int i = 0; i < Model.ForecastInfoList[0].ProjectHours.Count(); i++)
                    {
                        <td>
                            <span class="total_proj_value">
                                @Html.DisplayFor(x => Model.ForecastInfoList[i].ProjTotal) @*displays my horizontal total column*@
                            </span>
                        </td>
                    }
                    <td>
                        <span class="grandtotal">
                            @Html.DisplayFor(m => Model.ForecastInfoList[0].GrandTotal)
                        </span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <br />
    <div class="button">
        <p><input type="submit" class="btn-sm btn-warning" value="Save" name="Save" /> </p>
    </div>
</div>

使用的脚本

   <script>
    $(document).on("input", ".Hours", function () {

        total = 0;
       if ($(this).val() != "") {
           total += parseInt($(this).val());

           $(this).parent().parent().find(".total_emp_value").val($(this).val());
        }
        $(".total_emp_value").html(total);
    });</script>

我想在总列中显示各列和各行的总和,即该行中的所有文本框以及该列中的所有文本框都应显示行和列的总和。但是当我在.total_emp_value上设置我的脚本时,只有我最近更改的文本框显示总计为total_emp_value

我想分开做,但由于我是jquery的新手,我无法做到这一点

2 个答案:

答案 0 :(得分:0)

您可以尝试创建一个包含行数/列数的循环。像这样......

  <script type="text/javascript">
    $(document).ready(function() {
      $("#value11").val(Number($("#textboxrow1col1").val()) + Number($("#textboxrow1col2").val()));
    });
  </script>

#value11,#textboxrow1col1,#textboxrow1col2 - 应该是动态的(你可以通过剃刀视图创建)

以下是这方面的摘要,但不是完整的解决方案:

http://plnkr.co/edit/re7ROFztHZqjUlkzuBBD?p=preview

答案 1 :(得分:0)

@{
List<string> data = new List<string>() { "one", "two", "three" }; // Your Model data
    int i = 0;
    int j = 0;
}

<div>
    <table>
        @foreach (var item in data)
        {
            i++;
            //for () inside loop to break when the count of your object has the last index e.g. i =3 (use break;)
            <tr>
                <td>@Html.TextBox("name","", new { id = "txtboxRow" + i + "col" + j })</td>
            </tr>
        }
    </table>
</div>