带有文本框的 ASP .NET 表格行和列的总和

Question

我有一个 ASP .NET webforms 应用程序，员工在其中填写时间表。我有一个表，其中包含用于用户输入的 ASP:TextBox，我想做的是计算他们在当前行和当前列中的小时数的总和。

我看过之前的例子：SUM Total for Column，它让我非常接近。我在任何文本框的每个键上运行以下 javascript：

var totalsByRow = [0, 0, 0, 0, 0];
var totalsByCol = [0, 0, 0, 0, 0];
$(document).ready(function () {
    $('.sum').keyup(function (e) {
        var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

        $dataRows.each(function (i) {
            $(this).find('td:not(.totalRow)').each(function (j) {
                totalsByCol[j] += parseFloat($(this).val());
                totalsByRow[i] += parseFloat($(this).val());
            });
        });

        for (var i = 0; i < totalsByCol.length - 1; i++) {
            totalsByCol[totalsByCol.length - 1] += totalsByCol[i];
        }

        $("#sum_table td.totalCol").each(function (i) {
            $(this).html("total:" + totalsByCol[i]);
        });

        $("#sum_table td.totalRow").each(function (i) {
            $(this).html("total:" + totalsByRow[i]);
        });
    });
});

问题很简单：$(this).html() 没有得到文本框的值。我还根据其他帖子尝试了 $(this).val() 和 $(this).value ，但没​​有成功。那么如何获取调用这个keyup函数的文本框的值呢？

编辑：

我使用的 HTMl 代码只是我设置的一个简单的测试表。这是为了进一步澄清：

<script src="TotalForm.js"></script>
<table id="sum_table" border="1">
  <tr class="titlerow">
    <td>Apple</td>
    <td>Orange</td>
    <td>Watermelon</td>
    <td>Strawberry</td>
    <td>Total By Row</td>
  </tr>
  <tr>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox1" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox2" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox3" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox4" CssClass="sum"></asp:TextBox>
    </td>
    <td class="totalRow"></td>
  </tr>
  <tr>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox5" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox6" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox7" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox8" CssClass="sum"></asp:TextBox>
    </td>
    <td class="totalRow"></td>
  </tr>
  <tr>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox9" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowAA">
      <asp:TextBox runat="server" ID="TextBox10" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox11" CssClass="sum"></asp:TextBox>
    </td>
    <td class="rowBB">
      <asp:TextBox runat="server" ID="TextBox12" CssClass="sum"></asp:TextBox>
    </td>
    <td class="totalRow"></td>
  </tr>
  <tr class="totalColumn">
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
    <td class="totalCol">Total:</td>
  </tr>
</table>

Answer 1

编辑这部分代码

 $dataRows.each(function (i) {
            $(this).find('td:not(.totalRow)').each(function (j) {
                totalsByCol[j] += parseFloat($(this).val());
                totalsByRow[i] += parseFloat($(this).val());
   });
});

由

 $dataRows.each(function (i) {
                $(this).find('td:not(.totalRow)').each(function (j) {
                    totalsByCol[j] += parseFloat($(this).find(".sum").val());
                    totalsByRow[i] += parseFloat($(this).find(".sum").val());
       });
    });

.fin("sum") 查找输入文本控件。